El-table 勾选复选框获取列表数据快速入门指南

2023-02-20 08:03:28

在 El-table 中轻松勾选复选框并获取选中行数据

简介

使用 El-table 组件时，需要经常获取列表中被选中复选框的数据。这一功能在批量删除、编辑或导出数据等场景中至关重要。本文将详细介绍如何实现此功能，从添加复选框列到获取选中行的全部数据。

第一步：添加复选框列

在 El-table 中添加复选框列，需要在列定义中将 type 属性设置为 "selection"。例如：

<el-table :data="tableData">
  <el-table-column type="selection" width="55"></el-table-column>
  ...
</el-table>

第二步：获取选中行的索引

要获取选中行的索引，可以使用 selection-change 事件。此事件在选中或取消选中行时触发。在事件处理程序中，使用 $event 对象可以获取选中行的索引。例如：

<el-table :data="tableData" @selection-change="handleSelectionChange">
  ...
</el-table>

<script>
  export default {
    methods: {
      handleSelectionChange(selection) {
        console.log(selection);
      },
    },
  };
</script>

第三步：获取选中行的 ID

要获取选中行的 ID，可以使用 row-key 属性。该属性指定行数据的唯一标识符。例如：

<el-table :data="tableData" row-key="id">
  ...
</el-table>

在 selection-change 事件处理程序中，使用 $event 对象可以获取选中行的 ID：

<el-table :data="tableData" row-key="id" @selection-change="handleSelectionChange">
  ...
</el-table>

<script>
  export default {
    methods: {
      handleSelectionChange(selection) {
        console.log(selection[0].id);
      },
    },
  };
</script>

第四步：获取选中行的所有数据

要获取选中行的所有数据，可以使用 getSelectedRows 方法。此方法返回包含所有选中行数据的数组。例如：

<el-table :data="tableData" @selection-change="handleSelectionChange">
  ...
</el-table>

<script>
  export default {
    methods: {
      handleSelectionChange(selection) {
        const selectedRows = this.$refs.table.getSelectedRows();
        console.log(selectedRows);
      },
    },
  };
</script>

示例代码

以下是一个完整的示例代码，展示了如何使用上述步骤：

<template>
  <el-table :data="tableData" row-key="id" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    ...
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          { id: 1, name: 'John Doe', age: 30 },
          { id: 2, name: 'Jane Smith', age: 25 },
          { id: 3, name: 'Michael Jones', age: 35 },
        ],
      };
    },
    methods: {
      handleSelectionChange(selection) {
        console.log(selection);
        console.log(selection[0].id);
        const selectedRows = this.$refs.table.getSelectedRows();
        console.log(selectedRows);
      },
    },
  };
</script>