Elementui 级联选择器回显数据

要实现级联选择器的回显数据，需要在组件中绑定一个数组作为 v-model，然后在父组件中对该数组进行赋值即可实现回显。

具体实现步骤如下：

1. 在父组件中定义一个数组，用于存储级联选择器的选中值，如下所示：

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

<script>
export default {
  data() {
    return {
      selectedValues: [], // 存储级联选择器的选中值
      options: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'haidian',
              label: '海淀区',
            },
            {
              value: 'dongcheng',
              label: '东城区',
            },
          ],
        },
        {
          value: 'shanghai',
          label: '上海',
          children: [
            {
              value: 'pudong',
              label: '浦东新区',
            },
            {
              value: 'baoshan',
              label: '宝山区',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

2. 在父组件中获取回显数据，并将其赋值给 selectedValues 数组，如下所示：

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

<script>
export default {
  data() {
    return {
      selectedValues: [], // 存储级联选择器的选中值
      options: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'haidian',
              label: '海淀区',
            },
            {
              value: 'dongcheng',
              label: '东城区',
            },
          ],
        },
        {
          value: 'shanghai',
          label: '上海',
          children: [
            {
              value: 'pudong',
              label: '浦东新区',
            },
            {
              value: 'baoshan',
              label: '宝山区',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
  mounted() {
    // 模拟获取回显数据
    const data = {
      province: 'beijing',
      city: 'haidian',
    };

    // 将回显数据赋值给 selectedValues 数组
    this.selectedValues = [data.province, data.city];
  },
};
</script>

3. 当 selectedValues 数组的值发生变化时，级联选择器的选中值也会随之更新，因此我们可以在 handleChange 方法中获取最新的选中值，如下所示：

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

<script>
export default {
  data() {
    return {
      selectedValues: [], // 存储级联选择器的选中值
      options: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'haidian',
              label: '海淀区',
            },
            {
              value: 'dongcheng',
              label: '东城区',
            },
          ],
        },
        {
          value: 'shanghai',
          label: '上海',
          children: [
            {
              value: 'pudong',
              label: '浦东新区',
            },
            {
              value: 'baoshan',
              label: '宝山区',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
  mounted() {
    // 模拟获取回显数据
    const data = {
      province: 'beijing',
      city: 'haidian',
    };

    // 将回显数据赋值给 selectedValues 数组
    this.selectedValues = [data.province, data.city];
  },
};
</script>

这样，当父组件渲染完毕时，级联选择器的选中值就会自动回显。