html表单复选框隐藏,ElementUI 表格部分复选框禁用或隐藏

背景

我们在使用 element ui 的 Table 组件构建带复选框的表格时,我们希望根据条件禁用或者隐藏某行选择框。如下图所示:

bea8e9f59a1bdef20b10425a96a5f3dd.png

解析

通过查看 ElementUI 官方文档 selectable 实现是否禁用复选框,文档内容如下:参数说明类型可选值默认值selectable仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选Function(row, index)——

同样,可以利用 cell-class-name,对单元格设置 display: none 达到隐藏复选框的目的,文档内容如下:参数说明类型可选值默认值cell-class-name单元格的 className 的回调方法,也可以使用字符串为所有单元格设置一个固定的 className。Function({row, column, rowIndex, columnIndex})/String——

源码

具体实现方式如下:

HTML:

ref=”table”

row-key=”id”

border

fit

:data=”list”

:cell-class-name=”cellClassNameFn”

@selection-change=”handleSelectionChange”

>

{{ scope.row.title }}

{{ scope.row.status }}

JS:

export default {

data() {

return {

list: [{

id: ‘1’,

title: ‘活动1’,

status: 0

}, {

id: ‘2’,

title: ‘活动2’,

status: 1

}, {

id: ‘3’,

title: ‘活动3’,

status: 0

}, {

id: ‘4’,

title: ‘活动4’,

status: 0

}, {

id: ‘5’,

title: ‘活动5’,

status: 2

}],

selectUserList: []

}

},

methods: {

handleSelectionChange(selection) {

this.selectUserList = selection

},

handleClearSelection() {

this.selectUserList = []

this.$refs.table.clearSelection()

},

checkSelectable(row) {

return row.status !== 2 // 状态为 2 禁用复选框(返回值为 true 启用,false 禁用)

},

cellClassNameFn(row) {

if (row.columnIndex === 0 && row.row.status === 1) { // 第一列且状态为 1 通过自定义样式隐藏复选框

return ‘table-column-hidden’

}

}

}

}

CSS:

.table-column-hidden .el-checkbox__input {

display: none

}

版权属于:瞭月

版权声明:本文为瞭月原创文章,转载请附上原文出处链接和本声明。