elementui的Cascader 级联选择器多选后回显问题

elementui的Cascader 级联选择器多选后，如何根据选中的最后一级的多个id在组件上回显选中的值？

要在 Element UI 的 Cascader 组件中实现多选后根据选中的最后一级的多个 id 回显选中项，你可以使用 Cascader 组件的 value 属性来设置选中的值。以下是实现这一功能的步骤和示例代码：

1. 数据准备：准备级联选择器的数据源（options）。
2. 选中的值：维护一个数组来存储选中的值（selectedValues）。
3. 设置回显：根据选中的最后一级的多个 id 来设置 selectedValues，并绑定到 Cascader 组件的 value 属性。

假设你的级联选择器的数据结构如下：

const 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 输入框' }
        ]
      }
    ]
  }
];

你可以使用如下代码实现回显选中项：

<template>
  <div>
    <el-cascader
      v-model="selectedValues"
      :options="options"
      :props="cascaderProps"
      placeholder="请选择"
      clearable
    ></el-cascader>
    <button @click="setSelectedValues">回显选中项</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: options,
      selectedValues: [],  // 用于存储选中的值
      selectedIds: ['yizhi', 'fankui']  // 假设这些是选中的最后一级的 id
    };
  },
  computed: {
    cascaderProps() {
      return {
        multiple: true,
        checkStrictly: true  // 开启该属性使级联选择不限制必须选中父级
      };
    }
  },
  methods: {
    // 根据选中的最后一级的多个 id 设置选中的值
    setSelectedValues() {
      const findPaths = (options, selectedIds) => {
        const paths = [];
        const findPath = (opts, path) => {
          for (const opt of opts) {
            const newPath = path.concat(opt.value);
            if (opt.children) {
              findPath(opt.children, newPath);
            } else if (selectedIds.includes(opt.value)) {
              paths.push(newPath);
            }
          }
        };
        findPath(options, []);
        return paths;
      };

      this.selectedValues = findPaths(this.options, this.selectedIds);
    }
  }
};
</script>

在这个示例中，selectedIds 存储了最后一级的多个 id。当点击“回显选中项”按钮时，setSelectedValues 方法会根据 selectedIds 查找路径并设置 selectedValues，从而实现级联选择器的回显功能。

你可以根据具体的需求调整 options 和 selectedIds，以适应不同的数据结构和选中项。