如何使用elementui实现二级下拉选择

在Element UI中实现二级联动下拉选择通常涉及到`el-select`组件的嵌套使用以及数据绑定。以下是简单的步骤：

1. 引入依赖：

<template>
  <div>
    <!-- 其他Element UI组件 -->
    <el-select v-model="parentValue" placeholder="请选择上级">
      <el-option
        v-for="(item, index) in parentOptions"
        :key="index"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>

    <!-- 如果需要，可以添加一个计算属性来动态生成二级选项 -->
    <template #childSelect>
      <el-select v-model="childValue" @change="handleChildChange">
        <el-option
          v-for="subItem in childOptions[parentValue]"
          :key="subItem.id"
          :label="subItem.name"
          :value="subItem.id"
        ></el-option>
      </el-select>
    </template>
  </div>
</template>

2. 数据绑定：

<script setup>
import { ref } from 'vue';
const parentOptions = ...; // 上级选项数据
const childOptions = ...; // 下级选项数据，通常是上级值对应的选项集合

// 定义状态变量
const parentValue = ref(null); // 父级选择框的值
const childValue = ref(null); // 子级选择框的值

// 方法处理父级选择变化
function handleParentChange(value) {
  // 当父级选项改变时，更新子级选项列表
  childOptions = ... // 根据parentValue获取正确的子集
}

// 自动触发子级选择框的变化事件
function handleChildChange(value) {
  // 当子级选项改变时，处理逻辑...
}

// 初始化
handleParentChange(parentOptions[0].value);
</script>

3. CSS样式调整（可选），如果需要美化外观。