element ui 表格如何获取所有checkbox选中的行

你可以使用 Element UI 表格的 `getSelection()` 方法获取所有选中的行，然后遍历这个数组来获取选中行的数据。以下是一个示例代码：

// 获取表格实例
const table = this.$refs.table

// 获取选中的行
const selectedRows = table.getSelection()

// 遍历选中行的数据
const selectedData = []
selectedRows.forEach(row => {
  selectedData.push(row)
})

console.log(selectedData)

在这个示例中，我们首先通过 `$refs` 来获取表格实例，然后使用 `getSelection()` 方法获取选中的行。最后，我们遍历选中行的数组，将每一行的数据 push 到一个新的数组中。

相关问题

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

对于element ui表格的多选功能，你可以通过监听selection-change事件来获取选中的数据，然后将其添加到一个新的数组中。

例如：

<template>
  <div>
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        name: '张三',
        age: 18
      }, {
        name: '李四',
        age: 20
      }, {
        name: '王五',
        age: 22
      }],
      selectedData: []
    }
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedData = selection
    }
  }
}
</script>

在上面的例子中，我们定义了一个变量selectedData来存储选中的数据，然后在handleSelectionChange方法中将选中的数据赋值给selectedData。

至于如何将已选中的数据的多选按钮置灰，可以通过在表格的列定义中加入一个selection slot，通过判断当前行数据是否在已选中的数据中，来动态修改多选按钮的状态。

例如：

<template>
  <div>
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
        <template slot-scope="{row}">
          <el-checkbox
            v-model="selectedData"
            :label="row"
            :disabled="isDisabled(row)">
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        name: '张三',
        age: 18
      }, {
        name: '李四',
        age: 20
      }, {
        name: '王五',
        age: 22
      }],
      selectedData: []
    }
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedData = selection
    },
    isDisabled(row) {
      return this.selectedData.includes(row)
    }
  }
}
</script>

在上面的例子中，我们定义了一个isDisabled方法来判断当前行数据是否在已选中的数据中，如果是，则将多选按钮置灰。这里我们使用了Array的includes方法来判断一个元素是否包含在一个数组中。

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` 属性，来更新多选框的状态。