Modal 弹窗的禁止滚动是用 scrollable 和 lockScroll 来设置是否弹窗后面的页面可以滚动,但是如果是在已经禁止滚动的弹窗中再弹这一个,关闭的时候会导致动态移除了 body 上的 overflow:hidden,会导致当前没关闭的弹窗一下后面的页面可以滚动了,所以可以直接加个判断,当前弹窗已经禁止滚动了,子弹窗的禁止滚动就设置成允许滚动,只用设置 lockScroll 这一个参数就行了
Form 表单默认的 async-validator 校验,校验规则里如果不指定数据类型,默认是 String,但是下拉选项里的枚举值后端有时会弄成 Number,所以要自己指定 type: 'number',否则校验会一直不通过。
校验触发 trigger 一般直接选的用 change,输入的用 blur。
注意 Modal + Form + Select时,如果 trigger: 'change',关闭弹窗或显示弹窗的时候,Select 的 on-change 事件有时会被莫名其妙触发,然后会触发校验,解决方法:
① 将 trigger 改成 blur;
② 弹出或关闭时都自己手动重置下表单校验 this.$refs['form'].resetFields()
手风琴模式,通过路由跳转到二级菜单,二级菜单不会自动展开,需要用户手动点一下,解决方式是去监听路由变化,然后调用 updateOpened 强制更新菜单展开。
在当前页面选中刷新,切当前菜单有异步控制渲染,会造成不能选中,解决办法监听异步值,调用 updateActiveName 强制更新
可搜索 filterable 设置成 true 后,选择后输入框的值前后有空格会多出很多空格,造成显示错乱
最后发现是代码格式化的问题,加了 filterable 后选项 Option 里的文字不要换行,只要格式化换行了就会造成前后空格:
微信小程序里的 text 组件之前也遇到类似的问题,text 组件里的文字如果换行格式化,空格也会被保留,造成页面布局错乱。
切换页数的 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()
},
明明输入框里已经有值了,校验一直报红,看控制台还报错:
[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,类型不一致导致校验不通过。
页面更新:2024-05-24
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号