el-table 复选获取选中列表
时间: 2024-10-19 10:08:05 浏览: 14
在Element UI的`el-table`组件中,如果你想实现表格行的复选功能并获取选中的列表,你可以使用它的内置API,如`row-key`属性、`selection-change`事件以及`row-class-name`。以下是基本步骤:
1. **设置row-key**:每个表格行需要有一个唯一的标识,通常是数据的一个字段。例如,如果你的数据有一个`id`字段,可以这样设置:
```html
<el-table :data="tableData" :row-key="getRowKey">
...
</el-table>
```
`getRowKey(row) { return row.id; }`
2. **启用选择功能**:添加`selection-type`属性,设置为`single`、`multiple`或默认的`none`(禁用选择):
```html
<el-table :selection="selectedRows" selection-type="multiple">
...
</el-table>
```
3. **处理选择变化**:使用`selection-change`事件监听用户的选择操作,这个事件会传递两个参数,第一个是当前选中的所有行的数组,第二个是被取消选中的行的数组:
```javascript
methods: {
handleSelectionChange(rows) {
this.selectedRows = rows;
// 在这里你可以访问到选中的列表,比如console.log(this.selectedRows)
}
},
```
当用户点击行头的复选框或使用快捷键Ctrl/Cmd+Enter选择多行时,`handleSelectionChange`函数会被触发。
4. **显示选中状态**:如果需要在表格行上显示复选状态,可以使用`row-class-name`:
```html
<el-table-column type="index"></el-table-column>
<template slot-scope="{ $index, row }">
<el-checkbox v-model="row.checked" @change="handleCheckboxChange($event, row)"> {{row.name}}</el-checkbox>
</template>
```
这里`row.checked`就是复选框的状态。
阅读全文