element ui 联选择器多选回显

最新推荐文章于 2024-06-25 16:09:27 发布

ikun778g

最新推荐文章于 2024-06-25 16:09:27 发布

阅读量769

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_35556763/article/details/134073580

版权

一.使用场景

当数据是三级联动的时候，有很多数据需要做回显。后端只需要返回最后一层的id，和三级联动的所有数据
效果如图所示：在这里插入图片描述

二.官方回显的原理

在这里插入图片描述

只要v-model绑定的格式是[1,33,128]，回显就好办了

三.解决方式

1.要求后端返回最后一层的id和所有的数据
2.使用递归的方法将需要回显的数据组装成这种格式:
[[四川省id,成都市id,锦江区id],[四川省id,成都市id,武侯区id]]

四.相关代码

1.HTML

      <el-cascader
                :options="options"
                :props="props"
                :value="defaultCascaderValue"
                @change="handleChange"
                collapse-tags
              ></el-cascader>

2.data

      defaultCascaderValue: [],//绑定的值
      options: [],//级联选择器的所有数据
      data2: [128, 187],//回显的最后一层id
      props: {
        value: "id",
        label: "name",
        children: "child",
        multiple: true,
      },//级联选择器的相关配置

2.methods

  //获取机构数据
    getOrganizationData() {
      organizationData().then((res) => {
        this.options = res.data;//获取所有的数据，级联选择器可以正常渲染
        this.traverseData(this.options);//回显
      });
    },
    //递归完成回显
    traverseData(data, parentIds = []) {
      for (let i = 0; i < data.length; i++) {
        const item = data[i];
        const ids = [...parentIds, item.id];
        
        if (this.data2.includes(item.id)) {//data2是最后一层的id数组  data2: [128, 187]
          this.defaultCascaderValue.push(ids);//回显赋值
        }

        if (item.child && item.child.length > 0) {
          this.traverseData(item.child, ids);
        }
      }
    },