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

news/2025/2/23 1:43:05/

业务需求:需要做到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中某些数据行不能被选中的业务需求。


http://www.ppmy.cn/news/1197294.html

相关文章

ubuntu20.04.6使用FTP-及相关安全配置

前言&#xff1a; 作为一名运维&#xff0c;对文件系统&#xff0c;网络&#xff0c;文件共享&#xff0c;内存&#xff0c;CPU&#xff0c;以及一些应用服务及监控相关的知识需要 了解。今天是自己第一次搭建FTP&#xff08;以前用过smb&#xff0c;windows共享&#xff0c;FT…

基于Python的豆瓣电影排行榜,可视化系统

1 简介 基于Python flask 的豆瓣电影数据获取&#xff0c;数据可视化系统&#xff0c;本系统朱亚奥包括了影视系统的爬虫与分析。影视是人们娱乐、放松心情的重要方式之一&#xff0c;因此对影视的分析具有重要的现实意义。通过采用Python编程语言&#xff0c;使用flask框架搭…

错误页 模板

下载链接&#xff1a;https://ext.dcloud.net.cn/plugin?id15229 http://下载链接&#xff1a;https://ext.dcloud.net.cn/plugin?id15229 如有问题可添加下方名片

【已解决】设置SSH主机:VS Code-正在本地下载 VS Code 服务器

问题描述 很简单&#xff0c;就是我电脑强制重启之后用vscode再去连服务器&#xff0c;发现连不上了 解决办法 如上图&#xff0c;点击重试按钮&#xff0c;下面的这些东西就可以复制粘贴了 ctrf查找commit&#xff0c;这个时候就能找到一串d037ac076cee195194f93ce6fe2bdfe296…

java EE 进阶

java EE 主要是学框架(框架的使用,框架的原理) 框架可以说是实现了部分功能的半成品,还没装修的毛坯房,然后我们再自己打造成自己喜欢的成品 这里学习四个框架 : Spring ,Spring Boot, Spring MVC, Mybatis JavaEE 一定要多练习,才能学好 Maven 目前我们主要用的两个功能: …

AWS组件使用

kafka或kinesis 做数据收集 S3redshift 做数仓 EMR做计算 RDS做数据市场 AWS Glue / AWS Data Pipeline 做数据集成 这些组件配合起来&#xff0c;几乎可以做各种方式的数据分析 kinesis还是比较推荐&#xff0c;延迟时间可以配置的算是实时的&#xff0c;而且功能会多一点&am…

docker部署MySQL服务

部署 MySQL8.0.35社区版 1.下载镜像 docker pull container-registry.oracle.com/mysql/community-server:8.0.35 查看镜像 docker images 2. 启动MySQL服务器实例 docker run --namemysql8 --restart on-failure -p 3309:3306 -d container-registry.oracle.com/mysql/comm…

编译支持GPU的opencv,并供python的import cv2调用

下载opencv和opencv_contrib&#xff0c;cmake过程中要下载的一些包可以手动下载配置&#xff0c;如果网络较好&#xff0c;也可以等待自动下载。主要记录的是cmake命令&#xff1a; cmake -D CMAKE_BUILD_TYPERELEASE \-D BUILD_opencv_python3YES \-D CMAKE_INSTALL_PREFIX/…