vue项目 element-ui 级联选择器 el-cascader 回显的完美解决

在Vue项目中使用Element UI的级联选择器（el-cascader）时，如果需要回显数据，可以通过v-model绑定变量来实现。

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :props="{ expandTrigger: 'hover', value: 'code', label: 'name', children: 'items' }"
    @change="handleCascaderChange"
  ></el-cascader>
</template>
 
<script>
export default {
  data() {
    return {
      selectedOptions: [], // 用于双向绑定，控制级联选择器的值
      options: [
        {
          code: 'guid1',
          name: '选项1',
          items: [
            { code: 'guid1-1', name: '子选项1' },
            { code: 'guid1-2', name: '子选项2' }
          ]
        },
        // ...更多选项
      ]
    };
  },
  methods: {
    handleCascaderChange(value, selectedData) {
      // 处理级联选择器的变化
    }
  },
  mounted() {
    // 回显数据
    this.selectedOptions = ['guid1', 'guid1-1']; // 假设需要回显的值
  }
};
</script>

在这个例子中，selectedOptions数组用于存储级联选择器当前选中的值数组。在mounted钩子中，你可以将它设置为需要回显的值，级联选择器将会根据这个数组自动选中对应的选项。注意，这里的值必须与options中定义的值相匹配。