iview级联选择器数据量较大时渲染卡顿问题的解决

问题还原：在抽屉中加载多个级联选择器造成页面渲染卡顿。产品要求级联选择器可以选择任意一级。

解决思路：iview提供了load-data属性异步加载子选项。 设置属性 change-on-select 点任何一级都可以选择。

产生的新问题：设置属性change-on-select为true时，在编辑页面时只会回显第一级。

解决思路：为级联选择器注册 on-visible-change事件，展开和关闭弹框时触发，展开时设置 this.ischangeOnSelect为true。

<Cascader
   :data="areaList"
   placeholder="请选择地区"
   :load-data="loadData"
   @on-change="changeCas"
   @on-visible-change='handleVisibleChange'
   v-model="addresData"
   changeOnSelect='true'
>Cascader>

对绑定的数据进行处理， 给数据增加 loading 来标识当前是否在加载中

getAreaList() {
      //获取省市区
      getAreaList().then(res => {
        this.areaList = [];
        if (res.success) {
          if (res.result && res.result.length) {
            this.areaList = res.result.map(item => {
              return {
                value: item.value,
                label: item.label,
                children: [],
                loading: false,
                data: item.children
              }
            })
          }
        }
      });
  },

为级联选择器注册 on-visible-change事件

handleVisibleChange(val) {
      this.ischangeOnSelect = val;
},

load-data 的第二个参数为回调，如果执行，则会自动展开当前项的子列表。判断this.ischangeOnSelect是否为true，即判断级联选择器的下拉框是否为展开的，如果是展开的就执行回调函数，自动展开当前项的子列表，否则就不执行回调

loadData(item, callback) {
      item.loading = true;
      this.$nextTick(() => {
        item.children = item.data.map(dataItem => {
          if (dataItem.children.length == 0) {
            return {
              value: dataItem.value,
              label: dataItem.label
            }
          } else {
            return {
              value: dataItem.value,
              label: dataItem.label,
              loading: false,
              children: [],
              data: dataItem.children
            }
          }
        });
        item.loading = false;
        if(this.ischangeOnSelect) {
          callback();
        }
      })
},