el-cascader 多选 多级联动数据回显

el-cascader是一个基于Element UI的级联选择器组件，支持多选和多级联动。要实现多选和多级联动数据回显，可以按照以下步骤进行：

1.在模板中使用el-cascader组件，并设置v-model为一个数组，用于存储选中的值。

2.在组件中设置options属性为一个数组，用于存储级联选择器的选项数据。

3.在组件中设置props属性为一个对象，用于自定义选项的属性，例如value用于指定选项的值，label用于指定选项的显示文本。

4.在组件中设置@change事件，用于在选项发生变化时更新选中的值。

5.在组件中设置@expand-change事件，用于在级联选择器展开时动态加载选项数据。

6.在组件中设置cascaderData属性为一个数组，用于存储级联选择器的选项数据。

7.在组件中设置censusLandChange方法，用于在级联选择器展开时动态加载选项数据。

以下是一个el-cascader多选多级联动数据回显的示例代码：

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="cascaderData"
    :props="{ value: 'id', label: 'name' }"
    @change="handleChange"
    @expand-change="censusLandChange"
    placeholder="请选择省市区"
    style="width: 270px; padding-left: 7px;"
    multiple
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      cascaderData: []
    };
  },
  mounted() {
    // 初始化选项数据
    this.cascaderData = [
      {
        id: 1,
        name: "北京市",
        children: [
          {
            id: 11,
            name: "东城区",
            children: [
              {
                id: 111,
                name: "东华门街道"
              },
              {
                id: 112,
                name: "景山街道"
              }
            ]
          },
          {
            id: 12,
            name: "西城区",
            children: [
              {
                id: 121,
                name: "新街口街道"
              },
              {
                id: 122,
                name: "西长安街街道"
              }
            ]
          }
        ]
      },
      {
        id: 2,
        name: "上海市",
        children: [
          {
            id: 21,
            name: "黄浦区",
            children: [
              {
                id: 211,
                name: "外滩街道"
              },
              {
                id: 212,
                name: "南京东路街道"
              }
            ]
          },
          {
            id: 22,
            name: "徐汇区",
            children: [
              {
                id: 221,
                name: "徐家汇街道"
              },
              {
                id: 222,
                name: "漕河泾街道"
              }
            ]
          }
        ]
      }
    ];
  },
  methods: {
    handleChange(value) {
      // 更新选中的值
      this.selectedOptions = value;
    },
    censusLandChange(value, selectedData) {
      // 动态加载选项数据
      const targetOption = selectedData[selectedData.length - 1];
      targetOption.loading = true;
      setTimeout(() => {
        targetOption.children = [
          {
            id: `${targetOption.id}1`,
            name: `${targetOption.name}1`
          },
          {
            id: `${targetOption.id}2`,
            name: `${targetOption.name}2`
          }
        ];
        targetOption.loading = false;
      }, 1000);
    }
  }
};
</script>