文章目录
前言
Vue 项目开发过程中,尤其是后台管理开发,经常会用到 ElementUI 中的表格和表单,有时候我们需要在表格中添加复选框,来实现全选和单选当前行的操作,而这时如果有条件要限制选框是否禁用该如何处理呢?这就需要展开来说了,因为表头全选和表格行中的单个选择处理是不同的。
一、处理body中的复选框禁用
在官方文档 Table-column 中有一回调函数 selectable 用于返回值用来决定这一行的 CheckBox 是否可以勾选,它仅对 type=selection 的列有效。函数有两个参数 Function(row, index):
- row 当前行相关信息参数
- index 当前行索引值
设置复选框的 column 代码如下:
c
<el-table-column
type="selection"
width="60"
slign="center"
:selectable="enableSelect">
</el-table-column>
定义这个函数,并添加相关条件
当前是查看详情页面,或者编辑页面的当前行被禁用时不可操作
返回值为 false 不可操作,默认为 true 可操作
c
enableSelect(row,index){
if(this.type == 'detail'){
return false
} else if(row.status === 0) {
return false
} else {
return true
}
}
二、处理head中的复选框禁用
如果想要处理表头上面的复选框禁用,这里可以采用添加样式的方式,将其隐藏处理。这就需要在 el-table 上添加一个属性 header-cell-class-name,属性值可以是一个作为表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
Function({row, column, rowIndex, columnIndex})/Object
回调函数解构参数:
- row
- column
- rowIndex
- columnIndex
template 模板代码:
c
<el-table
v-loading="loading"
:data="tableData"
ref="tableRef"
:header-cell-class-name="cellClassName"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="60"
slign="center"
:selectable="enableSelect"/>
<el-table-column
type="index"
label="序号"
align="center"/>
....
<el-table-column label="状态" prop="status" align="center"/>
</el-table>
定义函数,指定某些条件下显示的类名
c
cellClassName() {
if(this.type == 'detail') {
return "cell-disabled"
} else {
return ""
}
}
style 样式隐藏(scss 处理器穿透)
c
::v-deep .cell-disabled .cell {
visibility: hidden;
}