iView级联选择器Cascader回显慢的问题

简单小结一下，iView在日常开发中所遇到的一点小问题，
今日简单聊聊iView级联选择器Cascader的使用心得：

[参考资料：iView ]

1.存在问题:

Cascader选择器在回显数据时会出现加载缓慢的状况及相应不及时，数据量略微大一点，会影响客户的体验感。

分析问题所在：不是接口请求与诸多循环遍历影响的时长问题，而是Cascader级联选择器回显机制问题。

2.代码：

a,基本属性：

data() {
    return {
      tableLoading: false,
      columns: [
        {
          title: "策略",
          align: "center",
          slot: "strategyItem",
          minWidth: 300,
        },
      ],
      tableList: [
        {
          keyword: "其它",
          strategyItem: [],
        },
      ],
      showList: false,
      configObj: {
        keyword: "",
        strategyName: "",
        operator: "CM",
        strategyType: "2", 
        strategyChannelDetails: [],
        id: "",
        strategyItem: [],
      },
      strategyChannelList: [],
      operatorList: [],
      data: [],
    
    };
  },

b,获取表格数据tableList

 getConfig(configId) {
      this.tableLoading=true;
      this.$axios
        .request({
          url: "/XXy/",
          method: "get",
          params: {
            id: configId,
          },
        })
        .then(
          (res) => {
            if (res.data.code === 0) {
              let {
                strategyName,
                operator,
                strategyType,
                strategyChannelDetails,
                id,
              } = res.data.data;

              this.configObj = {
                strategyName,
                operator,
                strategyType,
                strategyChannelDetails,
                id,
              };

              this.getstrategyItemList(this.configObj.operator);
              let arr = this.configObj.strategyChannelDetails.map((item) => {
                return {
                  keyword: item.keyword,
                  strategyItem: [item.type, item.strategyItemId + ""],
                  strategyName: (item.type==='0'?"单一":(item.type==='1'?"分省":" "))+" / "+item.strategyItemName,
                };
              });

              arr.length && (this.tableList = arr);
            this.tableLoading=false;
            } else {
              this.$Message.error(res.data.data);
            this.tableLoading=false;
            }
            this.disabled = true;
          },
          (err) => {
            this.$Message.error("获取数据失败");
            this.tableLoading=false;
          }
        );
    },

c,获取字典数据data

d,表格中插入组件Cascader

 <template slot-scope="{ row, index }" slot="strategyItem">
        <Cascader v-if="showList"
          :data="data"
          :key="'strategyItem-' + index"
          clearable
          transfer
          @on-change="
            (value, selectedData) => {
              changeRowData(index, row, value, selectedData);
            }
          "
          v-model="row.strategyItem"
        ></Cascader>
        <Input v-if="!showList"
          :key="'strategyName-' + index"
          transfer   
          v-model="row.strategyName"
          @mouseover.native="changeList()"
        ></Input>
  </template> 

e,把获取的字典数据data绑给Cascader，因为Cascader组件渲染绑定的数据是树形数组类型的数据，所以字典数据data是一个符合官网示例那样的数组。

tableList的strategyItem也是一个数组，只不过是过滤后的类型及属性对象数组。这个只是为了在回显时，在表格中通过其自身索引及对应属性，回显出字典数据data中的值。

在这过程中，会出现数据加载缓慢问题。尝试了很多办法，一些解决方法有点用，但不够合理确切。

参考解决方法：
https://juejin.cn/post/7028842100363886600

最终不断摸索，来了一波移形换影，偷天换日，完美解决此类问题。

3，解决方案：

进入页面时：通过将过滤好数据绑定给Input输入框，当需要修改或者点击输入框时，
让其级联组件Cascader显示出来。
因为Cascader不能直接回显变量，而将过滤好的数据给
input也不能通过级联下拉修改添加数据，两个切换，恰好完美弥补彼此缺点，解决响应慢的问题。
而级联组件和输入框相差只有后面的图标，我们可以通过鼠标移入悄然解决，纵享丝滑。

这里用到了鼠标移入事件
mouseover
在vue中这样使用mouseover会一直不显示。

@mouseover="changeList"

所以这样使用

@mouseover.native="changeList()"

鼠标移入，或者点击其他添加或删除方法触发
Input回显组件隐藏，可以点击修改添加等其他方法时Cascader显示,至此完美解决。