当前位置: 首页 > news >正文

[ element-ui:table ] 设置table中某些行数据禁止被选中,通过selectable 定义方法解决

业务需求:需要做到table表格中某些行数据不能被选中,比如在审核一些记录数据时,已经被审核的数据就不能再次提交审核,特别是批量多选的情况,列表中既有已经审核的,也有未审核的,只要求选中未审核的记录即可(当然也可以提前把已经审核的数据过滤掉)。

做到如下效果,点击全选,仅仅未被审核的被选中:

官网寻找解决办法:

发现列有一个selectable属性,描述为:仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选,正好符合解决上述需求。

解决方案如下:

1、选择列加上checkSelectable()方法

    <!--  列表项 --><el-table v-loading="loading" :data="recordsList" @selection-change="handleSelectionChange" stripe><el-table-column type="selection" width="55" align="center" :selectable="checkSelectable"/><el-table-column label="编号" align="center" prop="code" min-width="120px"class-name="small-padding fixed-width" fixed="left"/><el-table-column label="用户" align="center" prop="userCode" min-width="100px"/>......</el-table>
2、methods()方法内定义可以被选中的条件

  methods: {/** 只能选择未审核的记录 */checkSelectable(row) {return row.auditStatus === '0'},... ...

通过以上两步即可解决table中某些数据行不能被选中的业务需求。

相关文章:

  • Execution failed for task ‘:keyboard_utils:compileDebugKotlin‘.
  • C语言 每日一题 day9
  • 智慧公厕:科技赋予公共卫生新生命,提升城市管理品质
  • 记录一次时序数据库的实战测试
  • 图片复制上传,拖拽输入框上传,el-upload自定义上传方法(上传和备注框强关联)
  • Java 设计模式——命令模式
  • Linux shell编程学习笔记21:用select in循环语句打造菜单
  • AtCoder Beginner Contest 327 题解 A-D
  • Unity3D移动开发如何依据性能选择Shader
  • 01-单节点部署clickhouse及简单使用
  • 校验 ChatGPT 4.0 真实性的三个经典问题:快速区分 GPT3.5 与 GPT4,并提供免费测试网站
  • 台球厅桌球室计时计算软件计费方法,台球厅的电脑怎么计时
  • 由于flutter_app依赖于flutter_swiper>=0.0.2,不支持零安全,版本解决失败。
  • 短视频矩阵营销系统工具如何助力商家企业获客?
  • vscode 阅读 android以及kernel 源码
  • 深入了解以太坊
  • E-HPC支持多队列管理和自动伸缩
  • JavaScript 基础知识 - 入门篇(一)
  • miaov-React 最佳入门
  • Nginx 通过 Lua + Redis 实现动态封禁 IP
  • Python代码面试必读 - Data Structures and Algorithms in Python
  • socket.io+express实现聊天室的思考(三)
  • 反思总结然后整装待发
  • 前端路由实现-history
  • 腾讯优测优分享 | 你是否体验过Android手机插入耳机后仍外放的尴尬?
  • 写给高年级小学生看的《Bash 指南》
  • 支付宝花15年解决的这个问题,顶得上做出十个支付宝 ...
  • 资深实践篇 | 基于Kubernetes 1.61的Kubernetes Scheduler 调度详解 ...
  • ​Base64转换成图片,android studio build乱码,找不到okio.ByteString接腾讯人脸识别
  • ​创新驱动,边缘计算领袖:亚马逊云科技海外服务器服务再进化
  • ​如何使用ArcGIS Pro制作渐变河流效果
  • !!java web学习笔记(一到五)
  • #设计模式#4.6 Flyweight(享元) 对象结构型模式
  • (1)SpringCloud 整合Python
  • (2020)Java后端开发----(面试题和笔试题)
  • (C++17) optional的使用
  • (附源码)springboot高校宿舍交电费系统 毕业设计031552
  • (十)c52学习之旅-定时器实验
  • (一)基于IDEA的JAVA基础10
  • (总结)Linux下的暴力密码在线破解工具Hydra详解
  • *p++,*(p++),*++p,(*p)++区别?
  • .gitignore文件—git忽略文件
  • .net core MVC 通过 Filters 过滤器拦截请求及响应内容
  • .net 打包工具_pyinstaller打包的exe太大?你需要站在巨人的肩膀上-VC++才是王道
  • .net开源工作流引擎ccflow表单数据返回值Pop分组模式和表格模式对比
  • .NET开源全面方便的第三方登录组件集合 - MrHuo.OAuth
  • .Net转Java自学之路—SpringMVC框架篇六(异常处理)
  • .Net组件程序设计之线程、并发管理(一)
  • // an array of int
  • /3GB和/USERVA开关
  • /boot 内存空间不够
  • @angular/cli项目构建--Dynamic.Form
  • [ai笔记9] openAI Sora技术文档引用文献汇总
  • [Android学习笔记]ScrollView的使用
  • [BUG]Datax写入数据到psql报不能序列化特殊字符