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

在Element UI的Cascader级联选择器中，如果你遇到了多选后回显的问题，可能是因为默认情况下Cascader组件只支持单选。如果你需要实现多选并且能够回显，你需要进行一些额外的配置。

首先，确保你已经在Cascader组件中设置了multiple属性，以支持多选功能。其次，你可以通过v-model来绑定选中的值，并且确保这个数据是一个数组，以便可以存储多个选中值。

下面是一个简单的例子，展示如何在Element UI的Cascader组件中实现多选并回显：

<template>
  <el-cascader
    :options="options"
    :props="{ multiple: true, checkStrictly: true }"
    v-model="selectedOptions"
    @change="handleChange"
  ></el-cascader>
</template>
 
<script>
export default {
  data() {
    return {
      selectedOptions: [], // 用于v-model的数组，用于存储选中的值
      options: [
        {
          value: 'option1',
          label: 'Option 1',
          children: [
            {
              value: 'child1',
              label: 'Child 1',
            },
            {
              value: 'child2',
              label: 'Child 2',
            },
          ],
        },
        // ... 更多选项
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value); // 这里可以处理选中值变化后的逻辑
    },
  },
};
</script>

在这个例子中，selectedOptions是绑定到Cascader组件的v-model的数组，用于存储所有选中的选项值。options是级联选项的树状结构数据。multiple属性使得Cascader支持多选，而checkStrictly属性确保多选时不会选中父节点。

当用户选择或取消选择选项时，handleChange方法会被调用，并且选中的值会被更新到selectedOptions数组中。当组件重新渲染时，例如页面刷新，selectedOptions中的值会自动回显到Cascader组件中。