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

实现这个功能可以通过以下步骤:

1. 在 table 中定义一个多选列，并在该列中使用 `el-select` 组件来显示下拉框。

2. 在 `el-select` 组件中使用 `v-model` 绑定一个数组，用于存储被选中的选项。

3. 在 `el-select` 组件中使用 `filterable` 属性开启搜索功能，让用户可以快速找到需要的选项。

4. 在 `el-select` 组件中使用 `filter-method` 属性定义一个自定义的过滤函数，用于根据条件筛选选项列表。

5. 在 `el-select` 组件中使用 `before-dropdown-toggle` 事件，当下拉框被展开或收起时触发该事件，可以在该事件中动态更新选项列表。

6. 在 `el-table-column` 组件中定义一个删除按钮，并使用 `scope` 属性传递当前行的数据对象。

7. 在删除按钮的点击事件中，从被选中的选项数组中移除当前行的数据对象。

8. 在 `before-dropdown-toggle` 事件中检查当前行的数据对象是否在被选中的选项数组中，如果存在，则从选项列表中排除该选项，使其不能再次被选中。

下面是一个示例代码实现：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="爱好">
      <template slot-scope="scope">
        <el-select v-model="scope.row.hobbies"
                   multiple
                   filterable
                   :filter-method="filterHobbies"
                   @before-dropdown-toggle="updateHobbiesOptionList">
          <el-option v-for="option in hobbiesOptionList"
                     :key="option"
                     :label="option"
                     :value="option"
                     :disabled="disabledHobbiesOptionList.includes(option)">
          </el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="danger"
                   icon="el-icon-delete"
                   @click="removeTableRow(scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, hobbies: ['游泳', '读书'] },
        { name: '李四', age: 20, hobbies: ['唱歌', '跳舞'] },
        { name: '王五', age: 22, hobbies: ['旅游', '电影'] }
      ],
      hobbiesOptionList: ['游泳', '读书', '唱歌', '跳舞', '旅游', '电影'],
      disabledHobbiesOptionList: []
    }
  },
  methods: {
    filterHobbies(value, option) {
      return option.toLowerCase().indexOf(value.toLowerCase()) !== -1
    },
    updateHobbiesOptionList(visible) {
      if (visible) {
        this.disabledHobbiesOptionList = []
        this.tableData.forEach(row => {
          row.hobbies.forEach(hobby => {
            if (!this.disabledHobbiesOptionList.includes(hobby)) {
              this.disabledHobbiesOptionList.push(hobby)
            }
          })
        })
      }
    },
    removeTableRow(row) {
      const hobbies = row.hobbies
      const index = hobbies.findIndex(item => item === row)
      if (index !== -1) {
        hobbies.splice(index, 1)
      }
    }
  }
}
</script>

在上面的代码中，我们使用 `el-select` 组件来实现下拉框，并使用 `v-model` 绑定一个数组 `row.hobbies`，用于存储选中的选项。我们使用 `filterable` 属性开启搜索功能，并使用 `filter-method` 属性定义一个自定义的过滤函数。在 `before-dropdown-toggle` 事件中，我们使用 `updateHobbiesOptionList` 方法来动态更新选项列表，并使用 `disabledHobbiesOptionList` 数组来存储不能再次被选中的选项。在删除按钮的点击事件中，我们使用 `removeTableRow` 方法从选项数组中移除当前行的数据对象。