element plus toggleRowSelection
时间: 2023-11-14 13:07:12 浏览: 115
element plus 的 table 组件中,toggleRowSelection 方法用于切换某一行的选中状态。该方法的语法如下:
```javascript
toggleRowSelection(row, selected)
```
其中,row 表示要切换选中状态的行数据对象,selected 表示是否选中该行,为 true 表示选中,为 false 表示取消选中。
例如,以下代码可以实现点击某一行时切换该行的选中状态:
```html
<template>
<el-table :data="tableData" @row-click="handleRowClick">
<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 }
],
selectedRows: []
}
},
methods: {
handleRowClick(row) {
this.$refs.table.toggleRowSelection(row)
}
}
}
</script>
```
在上述代码中,通过 @row-click 监听表格的行点击事件,然后调用 toggleRowSelection 方法切换选中状态。
阅读全文