iView UI踩坑整理

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()
  }
}