亲宝软件园·资讯

展开

element-ui动态级联选择器回显问题详解(二十多行代码搞定)

雾恋 人气:0

场景描述

后台返回类目数组,其中有一级类目;二级类目,三级类目;这种情况下如何回显数据

效果图如下:

先给大家展示一些数据结构,后面会给大家一一讲解;尤其是回显那部分

数据结构如下:

[
    {
    	id:1, level:0,pid:0,name:'测试1'            
    },
    {
    	id:2, level:0,pid:0,name:'测试2'            
    },
    {
    	id:11, level:1,pid:1,name:'测试1-1'            
    },
    {
    	id:12, level:2,pid:11,name:'测试1-1-1'            
    }
]

先贴上html部分

<el-cascader :props="categoryProps" 
            v-model="cascaderData"></el-cascader>

然后再贴上data数据中的部分

这儿需要注意几个点:

label、value需要改为你数据结构一致的字段;

lazyLoad函数中的node有许多参数,如果目前的不能满足你的需求;你可以查看里面的一些参数是否有你需要的数值;

现在data中的lazyLoad函数主要是一些默认值;

      cascaderData: '12',
      categoryProps: {
        emitPath: false,
        label:'name', // 字段必须统一
        value:'id', // 字段必须统一
        lazy: true,
        lazyLoad (node, resolve) {
          const { level,value } = node;
          console.log(value);
          let nodes = [];
          if (level == 0) { // 第一级
            nodes = catalogueList.filter(v=>{return v.level == 0});
          }else { // 后面两级
            nodes = catalogueList.filter(v=>{return v.pid == value});
          };

          resolve(nodes.map(v=>({
            id: v.id,
            name: v.name,
            leaf: level >= 2
          })));
        }
      }, // 级联选择器显示数据

回显的方法:

将以下方法赋值给lazyLoad函数即可实现回显了;

逻辑:

  1. cascaderData:是选择的参数最后一级id
  2. value:我们在选择是(鼠标点击选择的)会触发并返回id,如果没有选择点击,则返回undefined(我们就在这儿进行判断是回显还是手动触发)
  3. 先说回显:threeFind:我们根据有的最后一级id(cascaderData),去查找改数据并查询到他父级(twoFind);然后根据他父级查找到(第三级)的所有数据(threeData)
  4. 然后根据二级数据(twoFind)去查找一级(oneFind),然后根据一级(oneFind)查找到二级的所有数据;一级不用查(level==0)全是
  5. 这个时候开始将对应(二级,三级)的数据放到children下面;children是默认的值;会自动去查找
  6. 在放置第三级的数据的时候需要注意一个值:leaf,为true时就是结束;也必须写这个;否则选择器不会显示,但是展开的时候是显示状态
  7. 现在回显也完成了;但是我们从二级或者一级选择分类的时候,会出现一级或者二级数据跑到二级或者三级目录下等清楚;这个时候就需要将选中的数据查找到
  8. 然后将其子集的数据查找出来;并判断如果是第三级就leaf:true;即可完成
  9. 赶紧去试试吧!
    setLazyLoad(node, resolve) {
      const { level,value } = node;
      const cascaderData = this.cascaderData;
      // 第一级数据
      let nodes = [];

      nodes = catalogueList.filter(v=>{return v.level == 0});
      // 选中的第三级某位数据
      const threeFind = catalogueList.find(v=>{return v.id == cascaderData});
      if (value) {
        // 查询数据
        const unknownFind = catalogueList.find(v=>v.id == value);

        if (level == 1) {
          let twoData = catalogueList.filter(v=>v.pid == unknownFind.id);
          nodes = twoData; // 第二级
        }else if (level == 2) {
          let threeData = catalogueList.filter(v=>v.pid == unknownFind.id);
          nodes = threeData.map(v=>{return {id:v.id,name:v.name,level:v.level,leaf:true}}); // 第三级
        };
      }else {
        // 选中的第二级某位数据
        let twoFind = catalogueList.find(v=>v.id == threeFind.pid);
        // 第三级数据
        let threeData = catalogueList.filter(v=>v.pid == twoFind.id);
        // 选中的第一级某位数据
        const oneFind = catalogueList.find(v=>{return v.id == twoFind.pid});
        // 第二级数据
        let twoData = catalogueList.filter(v=>{return v.pid == oneFind.id});
        // nodes = nodes.map(v=>{return {id:v.id,name:v.name,level:v.level}}); // 第一级
        const oneIndex = nodes.findIndex(v=>{return v.id == oneFind.id});
  
        nodes[oneIndex].children = twoData; // 第二级
  
        const twoIndex = nodes[oneIndex].children.findIndex(v=>v.id == twoFind.id);
        nodes[oneIndex].children[twoIndex].children = threeData.map(v=>{ // 第三季
          return {
            id:v.id,
            name:v.name,
            level:v.level,
            leaf: true,
          }
        });
      }

      resolve(nodes);
    },

总结

加载全部内容

相关教程
猜你喜欢
用户评论