级联选择器多选回显问题

Question

编辑的时候，可以获取到级联的值，但是多选框没有勾选上
1、多选只选一个输入框可以回显，但是没有勾选

2、多选选多个，输入框不能回显，也没有勾选

Answer 1

案例参考下看绑定的值对不对：

<template>
  <div>
    <el-cascader
      :options="options"
      :props="props"
      v-model="defaultCascaderValue"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                { value: "yizhi", label: "一致" },
                { value: "fankui", label: "反馈" },
                { value: "xiaolv", label: "效率" },
                { value: "kekong", label: "可控" }
              ]
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                { value: "cexiangdaohang", label: "侧向导航" },
                { value: "dingbudaohang", label: "顶部导航" }
              ]
            }
          ]
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                { value: "layout", label: "Layout 布局" },
                { value: "color", label: "Color 色彩" },
                { value: "typography", label: "Typography 字体" }
              ]
            },
            {
              value: "form",
              label: "Form",
              children: [
                { value: "radio", label: "Radio 单选框" },
                { value: "checkbox", label: "Checkbox 多选框" },
                { value: "input", label: "Input 输入框" }
              ]
            }
          ]
        }
      ],
      defaultCascaderValue: [], //绑定的值
      data2: ["yizhi", "fankui"], //回显的最后一层id
      props: {
        value: "value",
        label: "label",
        children: "children",
        multiple: true
      } //级联选择器的相关配置
    };
  },
  created() {
   this.traverseData(this.options); // 初始化
  },
  methods: {
    //递归完成回显
    traverseData(data, parentIds = []) {
      for (let i = 0; i < data.length; i++) {
        const item = data[i];
        const ids = [...parentIds, item.value];

        if (this.data2.includes(item.value)) {
          //data2是最后一层的value数组  data2: ['yizhi', 'fankui']
          this.defaultCascaderValue.push(ids); //回显赋值
        }

        if (item.children && item.children.length > 0) {
          this.traverseData(item.children, ids);
        }
      }
    }
  }
};
</script>