vue element table中多选下拉框,下拉框有一个选了后面不能在选前面选的值,通过table中删除按钮删除被选了得值后面能选删除的值

对于这个问题，可以通过动态设置下拉框选项的 `disabled` 属性来实现。具体步骤如下：

1. 在 Vue 的 `data` 中定义一个数组，用来存储所有选项的状态（是否已选，是否可选）。数组中的每个元素都是一个对象，包含 `value`、`label`、`disabled` 三个属性。

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` 属性。

<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` 属性。

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. 在删除按钮的点击事件中，将被删除选项的状态重置，以便后续可以重新选择。

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);
  }
}