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="性别"></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: '男' },
        { id: 2, name: '李四', age: 22, gender: '女' },
        { id: 3, name: '王五', age: 25, gender: '男' },
        { id: 4, name: '赵六', age: 27, gender: '女' },
      ],
      selectedData: [], // 选中的数据
    }
  },
  methods: {
    handleSelectionChange(selected) {
      this.selectedData = selected
    },
    handleTagClose(item) {
      // 在 selectedData 中移除该项
      const index = this.selectedData.indexOf(item)
      if (index !== -1) {
        this.selectedData.splice(index, 1)
      }
    },
  },
}
</script>

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

需要注意的是，在表格中开启多选功能需要在表格中添加 `type="selection"` 的列，这一列会自动生成多选框，用来选择每一行数据。在表格组件中，我们可以通过 `@selection-change` 监听选中项的变化，同时在表格上通过 `v-bind:row-key` 属性指定每一行数据的唯一标识符。