elementUI级联选项器

Element UI 的级联选择器（Cascader）组件允许用户从给定的选项列表中进行层级选择。以下是如何使用 Element UI 的级联选择器的示例代码：

首先，确保你已经在项目中安装并导入了 Element UI。

HTML 部分：

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

JavaScript 部分：

<script>
export default {
  data() {
    return {
      selectedOptions: [], // 用于绑定选中项的数组
      options: [ // 级联选项列表
        {
          value: 'option1',
          label: '选项1',
          children: [
            {
              value: 'child1',
              label: '子选项1'
            }
          ]
        },
        {
          value: 'option2',
          label: '选项2',
          children: [
            {
              value: 'child2',
              label: '子选项2'
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value); // 当选项变化时，打印出新的选中值
    }
  }
};
</script>

在这个例子中，options 是一个包含层级结构的选项数组，每个选项有 value 和 label 属性，如果有子选项，则使用 children 属性。v-model 用于双向绑定用户的选择。handleChange 方法用于处理选项变化时的逻辑。