获取el-table 选中的行
时间: 2024-11-21 09:06:20 浏览: 17
要获取Element UI 中`el-table`组件选中的行数据,可以按照以下步骤操作:
1. 首先,确保你已经绑定了`selection`属性到你的`el-table`组件上,这允许你跟踪当前选中的行。如果还没有绑定,可以在`<el-table>`标签内添加`ref="multipleTable"`并设置`selection`属性,如下面这样:
```html
<el-table :data="tableData" ref="multipleTable" selection-method="selectMethod" @selection-change="handleSelectionChange">
<!-- ... -->
</el-table>
```
2. 然后,在Vue实例中定义`handleSelectionChange`方法来处理选中状态的变化。当用户选择或取消选择某一行时,此方法会被调用。在这里,你可以获取选中的行数据:
```javascript
methods: {
handleSelectionChange(selection) {
if (selection.length > 0) {
const selectedData = this.$refs.multipleTable.selection; // 获取选中行的数据
console.log('Selected rows:', selectedData); // 打印选中行的具体数据
} else {
// 如果无选中项,则此处可执行清空操作或其他逻辑
}
},
selectMethod(row) { /* 自定义行选择的方法 */
// ...
}
}
```
现在,当你在表格中选中某一行,`handleSelectionChange`方法会返回一个包含所选行数据的对象数组。
阅读全文