elemnet ui 联动选择器 选择第一个的选择框内容 清除第二个框里的内容 为何清除后 第二个下拉框选择不了 代码展示

以下是一个示例代码，用于在 Element UI 中实现两个联动选择器，选择第一个下拉框的内容时，会清空第二个下拉框的内容，并更新其选项列表：

<template>
  <div>
    <el-select v-model="selectedFirst" @change="handleFirstChange">
      <el-option v-for="item in firstOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-select v-model="selectedSecond" :disabled="!secondOptions.length">
      <el-option v-for="item in secondOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFirst: '',
      selectedSecond: '',
      firstOptions: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
      ],
      secondOptions: [],
    };
  },
  methods: {
    handleFirstChange(newValue) {
      this.selectedSecond = ''; // 清空第二个下拉框的值
      this.secondOptions = this.getSecondOptions(newValue); // 获取第二个下拉框的选项
    },
    getSecondOptions(firstValue) {
      // 根据第一个下拉框的值，获取第二个下拉框的选项
      // 省略具体实现
      return [{ label: 'Option A', value: 'optionA' }, { label: 'Option B', value: 'optionB' }];
    },
  },
};
</script>

在上面的代码中，我们首先定义了两个下拉框 `selectedFirst` 和 `selectedSecond`，以及它们的选项列表 `firstOptions` 和 `secondOptions`。当第一个下拉框的值发生变化时，我们会调用 `handleFirstChange` 方法，该方法会清空第二个下拉框的值，并调用 `getSecondOptions` 方法获取第二个下拉框的选项列表。注意，在清空第二个下拉框的值后，我们需要重新获取第二个下拉框的选项列表，并更新 `secondOptions` 的值。最后，我们在模板中将两个下拉框渲染出来，并将第二个下拉框的 `disabled` 属性设置为 `!secondOptions.length`，以确保只有当第二个下拉框的选项列表不为空时，才可以进行选择。