iview组件踩坑记

　　Modal 弹窗中再弹窗，关闭一个后禁止页面滚动会失效
　　Modal 弹窗的禁止滚动是用 scrollable 和 lockScroll 来设置是否弹窗后面的页面可以滚动，但是如果是在已经禁止滚动的弹窗中再弹这一个，关闭的时候会导致动态移除了 body 上的 overflow：hidden，会导致当前没关闭的弹窗一下后面的页面可以滚动了，所以可以直接加个判断，当前弹窗已经禁止滚动了，子弹窗的禁止滚动就设置成允许滚动，只用设置 lockScroll 这一个参数就行了 Modal 弹窗中的 Form 表单里的 Select 下拉选择组件校验问题
　　Form 表单默认的 async-validator 校验，校验规则里如果不指定数据类型，默认是 String，但是下拉选项里的枚举值后端有时会弄成 Number，所以要自己指定 type: ＂number＂，否则校验会一直不通过。
　　校验触发 trigger 一般直接选的用 change，输入的用 blur。
　　注意 Modal + Form + Select时，如果 trigger: ＂change＂，关闭弹窗或显示弹窗的时候，Select 的 on-change 事件有时会被莫名其妙触发，然后会触发校验，解决方法：
　　① 将 trigger 改成 blur；
　　② 弹出或关闭时都自己手动重置下表单校验 this.$refs[＂form＂].resetFields()    Menu、MenuItem菜单组件不能自动展开和异步控制渲染当前页刷新不能选中
　　手风琴模式，通过路由跳转到二级菜单，二级菜单不会自动展开，需要用户手动点一下，解决方式是去监听路由变化，然后调用 updateOpened 强制更新菜单展开。
　　在当前页面选中刷新，切当前菜单有异步控制渲染，会造成不能选中，解决办法监听异步值，调用 updateActiveName 强制更新  select组件加了filterable选择后输入框的值前后有空格的问题
　　可搜索 filterable 设置成 true 后，选择后输入框的值前后有空格会多出很多空格，造成显示错乱
　　最后发现是代码格式化的问题，加了 filterable 后选项 Option 里的文字不要换行，只要格式化换行了就会造成前后空格： 
　　微信小程序里的 text 组件之前也遇到类似的问题，text 组件里的文字如果换行格式化，空格也会被保留，造成页面布局错乱。 page 分页组件
　　切换页数的 on-page-size-change 事件监听页数改变，我们一般会直接将传过来的 size 赋值给页数，然后手动载获取一下数据。但是这里 iview 有坑：在页码非第一页时会自动去触发页码改变事件获取数据，如果我们手动再去获取一次，其实会调用两次接口，如果是第一页，iview又不会主动去获取数据，通过查看组件源码： // 页码改变 changePage (page) {     if (this.disabled) return;     if (this.currentPage != page) { // 在第一页改变页码时不会主动去获取数据         this.currentPage = page;         this.$emit(＂update:current＂, page);         this.$emit(＂on-change＂, page);     } },  // 页数改变 onSize (pageSize) {     if (this.disabled) return;     this.currentPageSize = pageSize;     this.$emit(＂on-page-size-change＂, pageSize);     this.changePage(1); },
　　改变页码获取数据时，最好加一个判断 this.page.index === 1 的判断再手动去获取数据或者自己手动改下 index = 1 再去获取数据，否则 在末尾几页触发 handlePageSize 在 index 还没变的时候去获取实际没有的页数数据会返回空（而这次的异步接口如果比自动触发的晚显示可能造成页面暂无数据） handlePage(pageNum) {     this.page.index = pageNum     this.getList() },  handlePageSize(size) {     this.page.size = size      // 页码为非1时会自动触发获取数据     if (this.page.index === 1) this.getList()      // 或者下面这样（不过非第一页会调两次接口，不推荐）     // this.page.index = 1     // this.getList() },Form 表单里的 InputNumber 组件校验一直不通过
　　明明输入框里已经有值了，校验一直报红，看控制台还报错： [Vue warn]: Invalid prop: type check failed for prop ＂value＂. Expected Number with value 1, got String with value ＂1＂
　　这里就是因为初始赋值的时候，直接将数值字符串直接赋值给了 InputNumber，Form 表单里的校验规则 rules 里又有指定 type 为 number，类型不一致导致校验不通过。