element级联选择器数据回显问题

在写出解决方案之前，我先提出几个可能出现的问题：

1.级联数据改变但是视图不改变

2.点击级联框时数据会因为多次增加变多（语文不好表达不清楚）

 

以下方法可能稍微复杂，但是能解决你回显会出现的任何问题：

 

级联框代码：

<el-cascader :props="props" v-model="aa" :options="options"></el-cascader>

data中的代码：

　　　 aa: [],
      options: [],
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          let newa=[]
          if (node && node.children && node.children.length > 0) {
            newa = node.children.map((item) => item.value);
          }
          let nodes = [
            { value: 13, spu: "", label: "懒加载得到的数据", leaf: true },
          ]; //假设为懒加载获得到的数据
          let pushNew=[]
          nodes.forEach(item=>{
            if(newa.indexOf(item.value)<=-1){
              //如果原来的那里面没有的
              pushNew.push(item)
            }
          })
          resolve(pushNew);
        },
      },

methods里面的代码：

 async ddd() {
      let this_ = this;
      let res = await new Promise((resolve) => {
        setTimeout(() => {
          resolve([
            { value: 11, label: "第一层数据第一个" },
            { value: 12, label: "第一层数据第二个" },
          ]);
        }, 0);
      }); /**模拟获取第一层数据的接口 */
      let res1 = await new Promise((resolve) => {
        setTimeout(() => {
          resolve([
            {
              value: 11,
              label: "第一层数据第一个",
              config: { lazy: false },
              children: [
                {
                  value: 13,
                  sup: 11,
                  label: "第二层数据第一个",
                  children: [
                    {
                      value: 15,
                      sup: 13,
                      label: "第二层数据第一个",
                      leaf: true,
                    },
                  ],
                },
                { value: 14, sup: 11, label: "第二层数据第二个", leaf: true },
              ],
            },
          ]);
        }, 0);
      }); /**模拟获取第二层（第三层第四层）数据的接口 */
      let newList = [];
      res.forEach((item) => {
        if (item.value === res1[0].value) {
          newList.push(res1[0]);
        } else {
          newList.push(item);
        }
      }); /**将第二层第三层。。。。数据与第一层关联 */
      this.options = newList; /**将数据挂载到级联选择器中，注意，据测试，级联选择器仅会进行一次数据挂载 */
      /**注意此时我的data中的options是[],所以此时将数据修改一下是会渲染数据到级联框中的 */
      /*据测试，级联选择器首次渲染值在created和mounted之间，此时如果修改数据且不存在异步或者异步转同步方法是可以修改多次的*/
      /**另一种，当初始的data中的级联数据为[]时，初次渲染时间可以推后到[]有值 */
      console.log(this.options);
      this_.aa = [11, 13, 15]; /**将回显的数据推送到双向绑定的值 */
    },

mounted中的代码：

this.ddd();

同上功能实现

 

 要刷新视图，，

先隐藏框框再显示框框实现，，

dizhitongshang() {
        let newList = []
        this.baseInfo.daGdjzdAreaCode = []
        this.tree1Show = false
        this.areaListTree.forEach(async (item) => {
          if (item.areaCode === this.baseInfo.daHjszdAreaCode[0]) {
            let res1 = await findAreaListTreeReq({
              areaCode: item.areaCode,
            })
            item = res1.data[0]
          }
          newList.push(item)
        })
        this.areaListTree1 = newList
        let that = this
        setTimeout(() => {
          that.tree1Show = true
          that.baseInfo.daGdjzdAreaCode = this.baseInfo.daHjszdAreaCode
          that.baseInfo.daGdjzdmx = this.baseInfo.daHjszdmx
        }, 0)
      },

 

时间不早了，有什么疑问可以直接问我