vue elementui项目 el-table勾选复选框获取列表当前行数据 el-table收集列表中被选中复选框数据信息

在Vue项目中使用Element UI的el-table组件时，可以通过selection属性以及@selection-change事件来获取当前被勾选的行数据列表。

以下是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    ref="multipleTable"
    :row-key="getRowKey"
  >
    <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }],
      multipleSelection: []
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getRowKey(row) {
      return row.id;
    }
  }
};
</script>

在这个例子中，el-table-column 类型为 selection 用于创建复选框。@selection-change 事件用于监听勾选项目的变化，当复选框被选中或取消选中时，该事件会被触发。handleSelectionChange 方法会接收到当前选中的行数据列表，并将其存储在multipleSelection数组中。

注意：确保你的表格数据对象中有一个唯一的id属性，以便getRowKey方法可以正确地识别每一行数据。这是为了确保复选框的状态可以正确地被el-table组件跟踪。