el-table-column type=“selection” 根据本行某个数据 隐藏多选框
时间: 2023-05-18 13:03:37 浏览: 60
您可以使用 el-table-column 的 scoped slot,通过判断本行数据来决定是否渲染多选框。具体实现可以参考以下代码:
<el-table-column type="selection">
<template slot-scope="scope">
<template v-if="scope.row.someData === 'hideCheckbox'">
<!-- 不渲染多选框 -->
</template>
<template v-else>
<!-- 渲染多选框 -->
</template>
</template>
</el-table-column>
相关问题
el-table-column type=“selection” 根据本行姓名字段是否等于小明,隐藏多选框
您可以使用 el-table-column 的 slot-scope 属性来自定义列的渲染方式。在模板中,您可以使用 v-if 条件语句来判断当前行的姓名字段是否等于小明,如果是,则不渲染多选框,否则渲染多选框。以下是一个示例代码:
<el-table-column type="selection" :hide-header="true" :width="55">
<template slot-scope="scope">
<template v-if="scope.row.name !== '小明'">
<el-checkbox v-model="scope.row.checked"></el-checkbox>
</template>
</template>
</el-table-column>
在这个示例中,我们使用了 el-checkbox 组件来渲染多选框,使用 v-model 指令来绑定当前行的选中状态。如果当前行的姓名字段等于小明,则不渲染 el-checkbox 组件。
禁用el-table-column type="selection"表头
要禁用 `el-table-column` 的选择框,可以在 `el-table-column` 标签中添加 `selectable` 属性,并将其设置为 `false`,如下所示:
``` html
<el-table-column
type="selection"
label="选择"
selectable="false">
</el-table-column>
```
这将禁用 `el-table-column` 的选择框,但仍然保留表头。如果您还要去掉表头,可以在表格组件中设置 `show-header` 属性为 `false`,如下所示:
``` html
<el-table
:data="tableData"
show-header="false">
<el-table-column
type="selection"
label="选择"
selectable="false">
</el-table-column>
<!-- 其他列 -->
</el-table>
```
这将完全隐藏表头和选择框。