elementui Cascader 级联选择使用心得

<template>
  <el-cascader
    :options="options"
    v-model="selectedOptions"
    @change="handleCascaderChange">
  </el-cascader>
</template>
 
<script>
export default {
  data() {
    return {
      selectedOptions: [], // 用于存储选中的级联选项
      options: [
        {
          value: 'guide',
          label: '指南',
          children: [
            {
              value: 'disciplines',
              label: '学院',
              children: [
                {
                  value: 'forestry',
                  label: '林业学院'
                },
                // ... 更多子选项
              ]
            },
            // ... 更多子选项
          ]
        },
        // ... 更多顶级选项
      ]
    };
  },
  methods: {
    handleCascaderChange(value, selectedData) {
      console.log('选中的值:', value); // 输出选中项的值
      console.log('选中的数据:', selectedData); // 输出选中项的数据对象
    }
  }
};
</script>

这个例子展示了如何使用Element UI的Cascader组件，并在选项变化时通过@change事件处理器获取选中的值和数据对象。这是一个基本的用法，实际使用时可以根据需求进行扩展和定制。