长了得有十根白头发

对于这个问题，可以通过动态设置下拉框选项的 `disabled` 属性来实现。具体步骤如下： 1. 在 Vue 的 `data` 中定义一个数组，用来存储所有选项的状态（是否已选，是否可选）。数组中的每个元素都是一个对象，包含 `value`、`label`、`disabled` 三个属性。 ```javascript data() { return { options: [ { value: 'option1', label: '选项1', disabled: false, selected: false }, { value: 'option2', label: '选项2', disabled: false, selected: false }, { value: 'option3', label: '选项3', disabled: false, selected: false }, { value: 'option4', label: '选项4', disabled: false, selected: false }, ], tableData: [ { selectedOptions: [], ... }, { selectedOptions: [], ... }, { selectedOptions: [], ... }, ] } } ``` 2. 在多选下拉框的模板中，使用 `v-for` 循环渲染选项。在每个选项的 `el-option` 标签中，根据选项的状态动态设置 `disabled` 属性和 `selected` 属性。 ```html <el-select v-model="row.selectedOptions" multiple> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" :disabled="option.disabled" :selected="option.selected">{{ option.label }}</el-option> </el-select> ``` 3. 在 `change` 事件中监听选项的选择情况，根据已选选项的情况动态设置其他选项的 `disabled` 属性。 ```javascript methods: { handleOptionSelect(row) { // 获取已选选项的值 let selectedValues = row.selectedOptions; // 遍历所有选项，设置已选选项的 disabled 属性为 true，未选选项的 disabled 属性为 false for (let option of this.options) { if (selectedValues.includes(option.value)) { option.disabled = true; option.selected = true; } else { option.disabled = false; option.selected = false; } } } } ``` 4. 在删除按钮的点击事件中，将被删除选项的状态重置，以便后续可以重新选择。 ```javascript methods: { handleDelete(row) { // 获取被删除选项的值 let deletedValues = row.selectedOptions; // 遍历所有选项，将被删除选项的 disabled 属性重置为 false for (let option of this.options) { if (deletedValues.includes(option.value)) { option.disabled = false; option.selected = false; } } // 从表格数据中删除当前行 this.tableData.splice(this.tableData.indexOf(row), 1); } } ```