ElementUi级联选择器选择的数据渲染在div中

级联选择器选择的数据渲染在div中

需求：将选择的数据渲染在div中展示。
思路：当多选的时候是一个二维数组，单选时是一维数组，区分处理，不确定有多少层级，用递归实现，把拿到的数据放到数组里，然后处理成自己要的。``

<template>
  <div>
    <el-cascader
      v-model="value"
      :options="options"
      @change="handleChange"
      :props="props"
    ></el-cascader>
    <div>{{ this.deepCascader(this.options,this.value) }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      props: {
        // emitPath: false,
        multiple: true,
      },
      value: [],
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
          ],
        },    
      ],
  },
methods: {
// 级联选择器多层级递归
deep(options, res, index, arr) {
  let data = options.find((val) => {
    return val.value === res[index];
  });
  arr.push(data.label);
  if (data.children && data.children.length > 0) {
    index++;
    // 有子级 递归
    deep(data.children, res, index, arr);
  }
},

//options级联选择器的结构
deepCascader(options, res) {
  if (res.length > 0) {
    //res拿到的是存放数据的数组
    // 如果是多选，存放的是二维数组
    // 判断数组里边是否是数组
    let isArray = res.every((items) => {
      return Array.isArray(items);
    });   
    let index = 0;
    //如果是二维数组，说明是多选
    if (isArray) {
      let twoArr = [];
      for (const val of res) {
        let arr = [];
        deep(options, val, index, arr);
        //item.separator  自定义渲染格式  xx/xx或xx-xx  .....
        twoArr.push(arr.join("/"));
      }
      //处理成div中要存放的形式 
      return twoArr.join(",");
    } else {
      let arr = [];
      deep(options, res, index, arr);
      return arr.join("/");
    }
  } else {
    return "";
  }
}
}
}
</script>

效果图

如果有更好的，希望小伙伴可以指正，本人需要多多学习。