vue3 element-plus 级联选择器回显问题

对于级联选择器的回显问题，可以通过设置 v-model 的值来实现。具体来说，你需要将级联选择器的 v-model 绑定到一个数组上，数组中存储每个级联选择器选中的值。然后，在初始化级联选择器时，你需要将这个数组中的值传递给级联选择器，以实现回显。

以下是一个示例代码：

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    @change="handleChange"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ],
      selectedOptions: ["zhinan", "daohang", "dingbudaohang"],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

在上面的代码中，我们首先定义了一个 options 数组，用于存储级联选择器的选项。然后，我们定义了一个 selectedOptions 数组，用于存储级联选择器的选中值。在模板中，我们将级联选择器的 v-model 绑定到 selectedOptions 上，并将 options 数组传递给级联选择器的 options 属性。

这样，当级联选择器初始化时，它会自动选中 selectedOptions 数组中的值。当用户改变选择时，我们可以通过 @change 事件来获取用户选择的值，并将它们存储在 selectedOptions 数组中。