el-cascader三级联动回显

el-cascader是Element UI中的一个组件，用于实现级联选择器。它可以实现多级联动，并且支持回显已选择的值。

要实现el-cascader的三级联动回显，需要以下步骤：
1. 定义数据源：首先，你需要定义一个数据源，包含三级联动的数据。每个级别的数据都是一个数组，其中包含了该级别的选项。
2. 绑定数据：将数据源绑定到el-cascader组件上，通过设置`:options`属性来实现。这样el-cascader就知道要显示哪些选项了。
3. 设置默认值：通过设置`v-model`属性，将默认值绑定到el-cascader组件上。默认值应该是一个数组，每个元素对应一个级别的选项。
4. 实现回显：当需要回显已选择的值时，只需将默认值设置为已选择的值即可。el-cascader会根据默认值自动展示已选择的选项。

下面是一个示例代码，演示了如何实现el-cascader的三级联动回显：

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

<script>
export default {
  data() {
    return {
      selectedValues: [], // 默认值，用于回显已选择的值
      options: [
        {
          value: '1',
          label: '选项1',
          children: [
            {
              value: '1-1',
              label: '选项1-1',
              children: [
                {
                  value: '1-1-1',
                  label: '选项1-1-1'
                },
                {
                  value: '1-1-2',
                  label: '选项1-1-2'
                }
              ]
            },
            {
              value: '1-2',
              label: '选项1-2',
              children: [
                {
                  value: '1-2-1',
                  label: '选项1-2-1'
                },
                {
                  value: '1-2-2',
                  label: '选项1-2-2'
                }
              ]
            }
          ]
        },
        // 其他级别的选项...
      ],
      props: {
        value: 'value',
        label: 'label',
        children: 'children'
      }
    };
  },
  methods: {
    handleChange(value) {
      console.log('已选择的值：', value);
    }
  }
};
</script>

在上述示例中，`selectedValues`数组用于存储已选择的值，通过设置`v-model`将其与el-cascader组件进行绑定。`options`数组定义了三级联动的数据源，`props`对象指定了数据源中的属性名。

当需要回显已选择的值时，只需将已选择的值赋给`selectedValues`数组即可。el-cascader会根据`selectedValues`自动展示已选择的选项。