element ui表格多选功能将选中的每条数据添加到新的数组，然后被选中添加到新数组中的的数据的多选按钮置灰

实现这个功能需要在 Element UI 表格的 `@selection-change` 事件中监听选中项的变化，并在选中的项中添加到新的数组中。同时，需要通过表格的 `:row-key` 属性指定每一行数据的唯一标识符，以便在多选时能够正确识别每一行数据。

下面是一个示例代码，实现了将选中的数据添加到新数组中的功能，并将已选中的数据的多选按钮置灰：

<template>
  <div>
    <el-table :data="tableData" :row-key="row => row.id" @selection-change="handleSelectionChange">
      <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 prop="gender" label="性别">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.selected" :disabled="scope.row.disabled"></el-checkbox>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <p>已选中的数据：</p>
      <el-tag v-for="item in selectedData" :key="item.id" closable @close="handleTagClose(item)">
        {{ item.name }}
      </el-tag>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20, gender: '男', selected: false, disabled: false },
        { id: 2, name: '李四', age: 22, gender: '女', selected: false, disabled: false },
        { id: 3, name: '王五', age: 25, gender: '男', selected: false, disabled: false },
        { id: 4, name: '赵六', age: 27, gender: '女', selected: false, disabled: false },
      ],
      selectedData: [], // 选中的数据
    }
  },
  methods: {
    handleSelectionChange(selected) {
      // 处理选中状态和禁用状态
      this.tableData.forEach((item) => {
        item.selected = false
        item.disabled = false
      })
      selected.forEach((item) => {
        item.selected = true
      })
      this.tableData.forEach((item) => {
        if (!item.selected) {
          item.disabled = selected.some((selectedItem) => selectedItem.id === item.id)
        }
      })

      // 更新选中的数据
      this.selectedData = selected
    },
    handleTagClose(item) {
      // 在 selectedData 中移除该项
      const index = this.selectedData.indexOf(item)
      if (index !== -1) {
        this.selectedData.splice(index, 1)
      }

      // 更新选中状态和禁用状态
      this.tableData.forEach((tableItem) => {
        if (tableItem.id === item.id) {
          tableItem.selected = false
          tableItem.disabled = false
        } else {
          tableItem.disabled = this.selectedData.some((selectedItem) => selectedItem.id === tableItem.id)
        }
      })
    },
  },
}
</script>

在模板中，我们通过 `@selection-change` 监听表格的选中项变化，将选中的数据存储到 `selectedData` 数组中。在已选中的数据部分，我们使用 `v-for` 遍历 `selectedData` 数组，将每一项用 `el-tag` 组件进行展示，并提供 `@close` 事件来移除已选中的数据。在 `el-tag` 组件中，我们使用 `closable` 属性来允许该标签可以被关闭。

需要注意的是，在表格中开启多选功能需要在表格中添加 `type="selection"` 的列，这一列会自动生成多选框，用来选择每一行数据。在表格组件中，我们可以通过 `@selection-change` 监听选中项的变化，同时在表格上通过 `v-bind:row-key` 属性指定每一行数据的唯一标识符。在本示例中，我们还在表格的“性别”列中添加了一个多选框，并通过 `v-model` 绑定每一行数据的 `selected` 属性，以便在选中时更新该属性的值。在多选框上，我们通过 `:disabled` 属性来指定该多选框是否禁用。在 `handleSelectionChange` 和 `handleTagClose` 方法中，我们通过更新每一行数据的 `selected` 和 `disabled` 属性，来更新多选框的状态。