vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue Element级联选择器多选传值以及回显

Vue之Element级联选择器多选传值以及回显方式(树形结构)

作者:A . 阿冰

这篇文章主要介绍了Vue之Element级联选择器多选传值以及回显方式(树形结构),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue Element级联选择器多选传值以及回显

后台需要的数据格式:‘a’, ‘a1’, ‘b’, ‘b1’(字符串以逗号分隔)

后台返回的数据:同上

级联组建

<el-cascader
  :options="industrialList"
  placeholder="请选择产业链"
  :props="industrialProps"
  @change="changeIndustrial"
  clearable
  v-model="form.industrialChain"
></el-cascader>

组建选择处理

changeIndustrial (val) {
  let ids = [];
  val.forEach((item) => {
    ids.push(item[item.length - 1]);
  })
  this.industrialChainResult = ids.join(',');
}

处理后台返回数据进行回显

    // 级联回显
    industrialChinaShow (codes) {
      let echoTreeArr = [];
      let eachAry = codes.split(',')
      let itemAry = [];//分类树组件,每一项的code数组
      // 递归分类数据
      let recursionCategory = (data) => {
        let len = data.length;
        for (let i = 0; i < len; i++) {//循环data参数,匹配回显的code
          itemAry.push(data[i].code);//构建分类树数组项,入栈
          for (let j = 0; j < eachAry.length; j++) {//遍历子节点分类code,拼凑成数组项code,并终止循环
            if (eachAry[j] == data[i].code) {//匹配到子节点code
              echoTreeArr.push(JSON.parse(JSON.stringify(itemAry)));//push进树分类数据
              eachAry.splice(j, 1);//删除以匹配到的code
              break;
            }
          }
          if (eachAry.length <= 0) {//所有回显code匹配完成后,跳出循环
            break;
          } else if (data[i].categoryResultList && data[i].categoryResultList.length > 0) {// 如果存在子分类,递归继续
            recursionCategory(data[i].categoryResultList);
          }
          itemAry.pop();//出栈
        }
      }
      recursionCategory(this.industrialList);//调用递归
      this.form.industrialChain = echoTreeArr;
    },

在后台返回的地方调用第三部的方法

this.industrialChinaShow(res.industrialChain) // res.industrialChain 后台返回的'a', 'a1', 'b', 'b1'(字符串以逗号分隔)

好了 就这样。

element-ui动态级联选择器回显问题解决

场景描述

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

效果图如下

在这里插入图片描述

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

数据结构如下

[
    {
    	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函数即可实现回显了;

逻辑:

    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);
    },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文