vue和iview应用中的一些问题（持续更新）

2024年1月30日 374次阅读 来源: NsNe

之前回答过关于vue和iview使用的一些问题，偶尔又会有人再次问到，在之前的回答中去找太麻烦。

于是以后相关问题就归纳在这里啦。

1、 使用渲染函数渲染iview组件，如select时，添加on-change无效。
因为select中事件不是change，是on-change，所以应该是如下:

     return createElement(
      'Select',
      {
         on: {
             on-change: () => {   //这里的key是on-change,不是change
             
             }
         }
      }

2、在表单中使用iview Select或者其他的value类型为number时，校验是否为空。明明有值，确无法校验通过。

这是因为iview使用async-validator: https://github.com/yiminghe/a…。

默认校验数据类型为string，然而select的value为number。所以应该修改rules

 ruleValidate:{
        building: [
            { type: 'number', required: true, message: '必须选择楼宇', trigger: 'change' }
        ]
  }

3、 在modal中使用form，添加了表单校验，然而还想要有button的loading。loading默认设为false，那么不校验了，默认为true时，校验不通过会有loading效果，那么校验不通过时设置loading为false呢。那么下一次编辑不校验了。。。我们通过如下的代码，设置每次校验完成重新设置loading为true解决（有点绕，遇到问题的时候，自会明白）

    this.$nextTick(() => {
        this.loading = true;
    });

4、父组件传递props给子组件，props为array或object引用类型时，改变此引用类型，子组件不更新。

这个和vue的响应式有关，我们正确的做法是调用vue示例的set方法，如下所示:

Vue.set(vm.someObject, 'b', 2)


this.$set(this.someObject,'b',2)   //全局Vue.set方法的别名

5、A页面滚动到底部，路由从A页面跳转到B页面，B页面默认不在顶部，即滚动条没有置顶。
采用vue-router中的scrollBehavior

//第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

6、vue中高亮搜索关键字

highlightSearchKeyword(val, keyword) {
   if (val.indexOf(keyword) > -1 && keyword !== '') {
      let reg = new RegExp(keyword , 'g');
      return val.replace(reg, '<span style="color: #ff4040">' + keyword + '</span>');
   } else {
      return val;
   }
}
    原文作者：NsNe
    原文地址: https://segmentfault.com/a/1190000012038810
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞