vue3+elmentui列表嵌套了一个下拉框，选择了下拉框的某一项，列表里的输入框状态变为禁用

在 Vue3 中，结合 Element UI，如果你想要实现列表嵌套的下拉框，当用户选择下拉框中的某个选项时，使得列表中的输入框变为不可编辑（禁用），你可以按照以下步骤操作：

1. 首先，在你的组件模板中，你需要有一个动态绑定 v-model 的下拉框 `<el-select>` 和多个输入框 `<el-input v-model="inputValue" disabled>`。

<template>
  <div>
    <el-select v-model="selectedOption">
      <el-option
        v-for="(option, index) in options"
        :key="index"
        :label="option.label"
        :value="option.value"
      ></el-option>
    </el-select>

    <el-row>
      <el-col v-for="(item, index) in listItems" :key="index">
        <el-input v-model="listItems[index].inputValue" :disabled="isDisabled(index)" />
      </el-col>
    </el-row>
  </div>
</template>

2. 定义 `options` 数组存储下拉框的数据，以及 `selectedOption` 来跟踪当前选中的值。

3. 创建计算属性 `isDisabled`，根据当前选中的 `selectedOption` 和列表项 `listItems` 的关联判断是否禁用输入框。例如，如果下拉框的值存在且等于某个列表项的值，则输入框禁用；否则启用。

<script setup>
import { ref } from 'vue';

const options = ...; // 下拉框数据
const selectedOption = ref(null);
const listItems = ...; // 列表数据

const isDisabled = (index) => {
  return selectedOption.value && selectedOption.value === listItems[index].optionValue;
};
</script>

现在，当你在下拉框选择一个选项时，对应列表中的输入框会被自动禁用或启用。