vue a-table获取所有选中项

可以通过以下代码获取所有选中项：

const rows = this.$refs.tableRef.selection;

其中，`tableRef` 是表格的引用名称，`selection` 是选中项的数组。通过这个数组可以获取到所有选中的行数据。

相关问题

vue el-table 复选框选中获取id值

Vue.js 的 `el-table` 组件中的复选框通常通过 `selection` 或 `row-selection` 属性来实现选择功能。当你需要获取选中的行ID时，可以使用 `@selection-change` 事件处理程序，该事件会在用户完成一次选择操作后触发，传递给函数的是一个 Selection 对象。

首先，在 Vue 模板上绑定一个变量来保存选中的数据，例如：

<template>
  <el-table :data="tableData" row-key="id" selection-mode="multiple">
    <!-- ... 表格列 ... -->
    <el-table-column type="selection" width="55"></el-table-column>
    <!-- ... 其他列 ... -->
    <el-table-column label="操作" width="100">
      <template slot-scope="scope">
        <el-checkbox @change="handleCheckboxChange(scope.$index, scope.row.id)"></el-checkbox>
      </template>
    </el-table-column>
  </el-table>
</template>

然后，在你的组件脚本部分定义 `handleCheckboxChange` 函数，它接收当前行的索引和ID作为参数：

export default {
  data() {
    return {
      tableData: [], // 假设这是你的表格数据数组
      selectedIds: [] // 存储选中的行ID
    };
  },
  methods: {
    handleCheckboxChange(index, id) {
      if (this.selectedIds.includes(id)) {
        this.selectedIds.splice(this.selectedIds.indexOf(id), 1);
      } else {
        this.selectedIds.push(id);
      }
    }
  }
}

当用户点击复选框时，这个函数会更新 `selectedIds` 数组，你可以在这个列表中获取到所有的已选中行ID。如果需要实时获取当前状态下的ID，可以在模板内直接引用 `selectedIds`。

vue3+el-table获取选中行的index

在Vue3和Element Plus（即Vue的UI库Element的升级版本）中获取`el-table`组件选中行的索引可以通过几种方式实现。以下是一个基本的示例，展示了如何在Vue3中使用Element Plus的表格组件来获取选中行的索引：

首先，你需要在组件中引入`el-table`和`el-table-column`组件，并且为表格设置一个`row-key`属性，这个属性通常是行数据的唯一标识，比如`id`字段。

然后，在表格中添加一个选择框，可以通过`type="selection"`来实现。同时，你需要为表格添加一个事件监听器，比如`@selection-change`，来监听选择框的变化。

在事件处理函数中，你可以通过事件对象`$event`来获取当前选中项的索引。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script setup>
import { ref } from 'vue';

const tableData = ref([
  // 表格数据
]);

const handleSelectionChange = (selection, rows) => {
  // `selection` 是当前选中的行数据数组
  // `rows` 是所有行数据数组
  if (rows.length) {
    const selectedIndexes = rows.map(row => tableData.value.indexOf(row));
    console.log(selectedIndexes); // 这里就是当前选中行的索引数组
  }
};
</script>

请注意，上面的代码是一个示例，其中`handleSelectionChange`函数将输出所有选中行的索引。