vue 实现级联选择器功能

vue开发中，通过使用 Element UI 的 el-cascader 组件来实现级联选择器功能,下面是一个示例代码，演示如何使用 el-cascader 组件初始化级联选择器，并设置默认值为单位 测试1 和部门 测试11

<template>
  <div>
    <el-cascader
      v-model="selectedValues"
      :options="options"
      :props="props"
      @change="handleChange"
      placeholder="请选择"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始化级联选择器的选中值
      selectedValues: [],
      // 级联选择器的数据源
      options: [
        {
          value: '1',
          label: '测试1',
          children: [
            { value: '2', label: '测试11' },
            { value: '3', label: '测试12' }
          ]
        }
      ],
      // 自定义配置，用于指定数据结构中的属性名
      props: {
        value: 'value',
        label: 'label',
        children: 'children'
      }
    };
  },
  methods: {
    // 监听级联选择器值变化事件
    handleChange(selectedValues) {
      console.log('选中的值：', selectedValues);
    }
  },
  created() {
    // 设置初始化选中值为单位 '测试1' 和部门 '测试12'
    this.selectedValues = ['1', '3'];
  }
};
</script>

在这个示例中，options 数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括 value、label 和 children 属性。props 对象用于指定数据结构中的属性名，以便 el-cascader 组件正确地解析数据。

通过在 selectedValues 中设置初始选中值为单位 测试1 和部门 测试12，并将其绑定到 el-cascader 组件的 v-model 上，可以在初始化时选中指定的值。