el-table点击多选框获取当前选中行的数据
时间: 2023-08-15 12:07:52 浏览: 70
你可以通过监听 el-table 的 selection-change 事件来获取当前选中的数据。在事件处理函数中,可以通过传入的参数 selection 获取到当前选中的行数据,具体实现如下:
```html
<template>
<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>
</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 方法中,我们将传入的 selection 参数赋值给 selectedData 数组。这样,在组件中就可以使用 selectedData 数组来获取当前选中的行数据了。