vue toggleRowSelection 怎么指定行表头的取消勾选
时间: 2023-07-25 19:12:15 浏览: 237
你可以使用 `table-header-row-key` 属性来指定行表头的 `key` 值,然后在 `toggleRowSelection` 方法中判断当前行是否是行表头,若是,则不执行勾选/取消勾选的操作。
具体实现可以参考以下代码:
```html
<el-table
:data="tableData"
:row-key="row => row.id"
:table-header-row-key="'header'"
@row-click="handleRowClick"
>
<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>
```
```javascript
methods: {
handleRowClick(row) {
// 判断是否是行表头
if (row.$type === 'header') {
return;
}
this.$refs.table.toggleRowSelection(row);
}
}
```
在上面的示例中,我们通过给 `table-header-row-key` 属性传递一个值为 `'header'` 的字符串来指定行表头的 `key` 值为 `'header'`,然后在 `handleRowClick` 方法中判断当前行的 `$type` 是否为 `'header'`,如果是,则直接返回,否则调用 `toggleRowSelection` 方法来执行勾选/取消勾选的操作。