el-table 如何实现单击行时选中复选框
时间: 2023-10-18 15:02:56 浏览: 137
可以通过给 `el-table` 组件设置 `@row-click` 事件来实现单击行时选中复选框。
具体实现步骤如下:
1. 给 `el-table` 组件设置 `@row-click` 事件,绑定一个方法。
```
<el-table @row-click="handleRowClick">
...
</el-table>
```
2. 在 `handleRowClick` 方法中,获取当前点击的行数据和选中状态,然后通过 `this.$refs.table.toggleRowSelection(rowData)` 方法来切换选中状态。
```
methods: {
handleRowClick(rowData) {
// 获取当前行的选中状态
const isSelected = this.$refs.table.isRowSelected(rowData);
// 切换选中状态
this.$refs.table.toggleRowSelection(rowData, !isSelected);
}
}
```
3. 在 `el-table-column` 组件的 `type` 属性中设置为 `selection`,开启复选框。
```
<el-table-column type="selection"></el-table-column>
```
完整代码示例:
```
<template>
<el-table :data="tableData" @row-click="handleRowClick" ref="table">
<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-column prop="gender" label="性别"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
]
};
},
methods: {
handleRowClick(rowData) {
// 获取当前行的选中状态
const isSelected = this.$refs.table.isRowSelected(rowData);
// 切换选中状态
this.$refs.table.toggleRowSelection(rowData, !isSelected);
}
}
};
</script>
```
阅读全文