【ElementUI】el-table中复选框禁用处理

文章目录

前言

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;
}
相关推荐
Mr_Xuhhh24 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic7 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端