el-cascader级联选择器-懒加载下的数据回显问题（多选/单选）

深情止于人海

已于 2022-08-09 10:06:03 修改

阅读量1.1w

点赞数 11

分类专栏： element ui 文章标签： elementui vue.js 前端

于 2021-12-20 13:50:14 首次发布

本文链接：https://blog.csdn.net/w_p_wyd/article/details/122035108

版权

element ui 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

很多时候我们需要使用el-cascader去做级联的选择，同时在编辑的时候会有回显的问题，在element的文档中并没有很好的体现出el-cascader的回显问题，这个时候需要我们自己去深究一下。

首先我们会发现el-cascader的option属性：

也就是需要options才可以回显，格式一般为：

children是二级的数据。如果有三级继续在children加入children，以此类推。

所以el-cascader回显的关键在于options的数据整合。

但是我们是在懒加载下的，并没有二级和二级以后的数据，所以要做递归循环，根据v-model拿到的值去取到二级或者多级的数据。

v-model取到的值是：[ [zhinan,shejiyuanze],[ziyuan,jiaohu] ]。

[ [一级的value，二级的value]，[一级的value，二级的value] ]。

以下用valueList代替v-model

在做编辑的时候根据后端返回值我们需要转成以上格式！！！

那么开始我们的回显之旅吧。

判断是否是回显，如果this.valueList>0 代表需要回显，调用formatting 如果不回显直接调取一级数据resolve回去。

  lazyLoads(node, resolve) {
      console.log(node);
      if (node.level == 0) {
          debugger
        // 判断是否回显 如果this.valueList>0 代表需要回显，调用formatting 如果不回显直接调取一            
           级数据resolve回去。
        if (this.valueList.length > 0) {
          this.formatting(); 
        } else {
          let res = this.getfristChild()
          resolve(res);
        }
      } else {
        let list = this.valueList;
        //如果有children 证明有子集可以继续调取 
        if (!node.data.children) {
          let res = this.getChildrenList(node.data.value);
          setTimeout(() => {
            // 延时可加可不加
            resolve(res);
          }, 100);
        } else {
          resolve([]);
        }
        // 先合并在去重
        this.valueList = [...new Set([...this.valueList, ...list])];
        console.log(this.valueList)
      }
    },

  formatting() {
      // 拿一级数据 根据 this.valueList去判断哪些一级数据需要回显
      let res =  this.getfristChild();
      this.valueList.forEach((item) => {
        if (item.length > 1) {
          item.forEach( (sitem, index) => {
            if (index == item.length - 1) {
              return;
            }
            let arr = this.getChildrenList(sitem);
            this.findItem(res, arr, sitem);
          });
        }
      });
    },
  // 递归判断
  findItem(res, arr, id) {
       for (let i = 0; i < res.length; i++) {
          if (res[i].value === id) {
            res[i].children = arr; 
            this.optionsList = res;
          }
          if (res[i].children) {
            this.findItem(res[i].children, arr, id);
          }
        }
         
      },
 // 请求一级节点 我这里没走接口。
  getfristChild() {
    return this.list1;
  },
//获取子集数据  没到取接口，假数据模仿
  getChildrenList(value){
      let res = [];
      if (value == 'zhinan') {
        res = [
            {
                value: 'shejiyuanze',
                label: '设计原则',
                leaf:true
            },
           {
            value: 'daohang',
            label: '导航',
           }
        ];
      }
      if (value == 'ziyuan') {
        res = [
            {
                value: 'axure',
                label: 'Axure Components',
                leaf:true
            }, 
            {
                value: 'sketch',
                label: 'Sketch Templates',
                leaf:true
            }, 
            {
                value: 'jiaohu',
                label: '组件交互文档',
                leaf:true
            }
        ];
      }
      return res;
    },

至此，el-cascader的回显就OK了，有此需求的小伙伴可以直接copy使用或者去gitHub拉取，

git地址：GitHub - wydxiansheng/el-cascaderContribute to wydxiansheng/el-cascader development by creating an account on GitHub.https://github.com/wydxiansheng/el-cascader.git