怎么获取el-table中数据的选中状态
时间: 2023-05-23 17:06:59 浏览: 1824
vue3表格的二次封装
如果您是在Vue框架中使用el-table组件,则可以通过以下步骤获取el-table中数据的选中状态:
1. 在el-table标签中添加selection属性,并绑定到一个数组中,例如:
```
<el-table :data="tableData" :selection="selectedRows"></el-table>
```
2. 在Vue组件中声明一个selectedRows数组,用于存储选中的行数据,例如:
```
data() {
return {
tableData: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
],
selectedRows: []
}
}
```
3. 在el-table标签中添加@selection-change事件监听器,用于捕获选中状态的变化,并更新selectedRows数组,例如:
```
<el-table :data="tableData" :selection="selectedRows" @selection-change="handleSelectionChange"></el-table>
methods: {
handleSelectionChange(rows) {
this.selectedRows = rows
}
}
```
4. 现在selectedRows数组中包含了所有选中的行数据,您可以使用它们进行后续操作,例如删除选中的行或进行批量操作。
希望这可以帮助您获取el-table中数据的选中状态。
阅读全文