在vue3中<el-table-column type="selection" width="55" align="center" />怎么禁用选中的复选框
时间: 2024-09-25 16:21:22 浏览: 55
el-table无限滚动+控制列是否显示+列排序(非json)
5星 · 资源好评率100%
在 Vue3 中,`<el-table-column>` 的 `type="selection"` 是用于启用表格选择功能的,如果你想禁用已选中的复选框,可以直接设置 `reserve-selection` 或者 `selectable` 属性。
如果你想禁止所有行的默认选择,你可以这样做:
```html
<template>
<el-table :data="tableData">
<el-table-column
type="selection"
width="55"
align="center"
reserve-selection="false" <!-- 这里将 reserve-selection 设置为 false 来禁用默认的选择 -->
/>
...其他列...
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [...], // 表格数据
};
},
};
</script>
```
如果你只想在特定条件下的行上禁用选择,可以在 `row-class-name` 或 `formatter` 方法中添加判断逻辑:
```html
<el-table-column
type="selection"
width="55"
align="center"
formatter={row => (/* 判断条件,如 row.disabled ? '不可选择' : '' */) || ''}
/>
```
这里假设 `disabled` 是你表头的数据中某个字段,表示是否禁用选择。
阅读全文