博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue和iview应用中的一些问题(持续更新)
阅读量:5979 次
发布时间:2019-06-20

本文共 1568 字,大约阅读时间需要 5 分钟。

之前回答过关于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: 。

默认校验数据类型为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, '' + keyword + '');   } else {      return val;   }}

转载地址:http://ngoox.baihongyu.com/

你可能感兴趣的文章
如何给网页标题栏上添加图标(favicon.ico)(转)
查看>>
[转载] Linux架构
查看>>
mysql授权
查看>>
Ubuntu下SSH设置
查看>>
IOS-小项目( 网络部分 简单实现)
查看>>
C/C++基本数据类型
查看>>
C++第八章习题
查看>>
multiset || 线段树 HDOJ 4302 Holedox Eating
查看>>
POJ2115:C Looooops——题解
查看>>
Spring-boot+Mybatis+Maven+MySql搭建实例
查看>>
最基本的js与css 控制弹出层效果
查看>>
第12章线程控制总结
查看>>
网络对抗技术实验一
查看>>
mysql命令大全
查看>>
KVO
查看>>
html----怎样实现元素的垂直居中
查看>>
不显示BOM清单的版本
查看>>
Oracle EBS-SQL (CST-4):检查组织间项目成本.sql
查看>>
PHPMyadmin配置文件详解
查看>>
100C之15:倒底捕了多少鱼?
查看>>