iVew UI记录一些有用的好东西
Select 选择器
1. 多级联动回显问题
1.1 单选的话只能回显第一级,不会回显之后几级。
问题:初始化加载的时候没有走on-change事件
解决办法:初始化获取回显数据之后,手动调用其他几个下拉内容的接口。
1.2 多选的话可以回显、但是遇到中间层级有单选的时候会出现上述1.1的问题,根据1.1解决即可
2. 多级联动多选清除数据问题
2.1 多选添加或者删除选项之后,清空数据,但是回显会出现问题
问题:回显的时候自动走on-change事件,直接给之后几级的内容清空就会产生问题
解决办法:通过Select隐藏的数据来比较上次与本次数据,进行判断
<Select v-model="model.brandCode" ref="brandCode" :label-in-value="true" @on-change="brandChange" multiple>
<z-option v-for="item in brandList" :value="item.code" :key="item.code">{{item.name}}</z-option>
</Select >
brandChange(data) {
if (data.length > 0) {
// 上次数据
let lastData = this.$refs.brandCode.value.toString()
// 本次数据
let thisData = data.map(t => t.value).toString()
// 两次数据不同数据
if (lastData !== thisData) {
this.clearData()
}
...
} else {
this.clearData()
}
}