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

news2024/11/27 20:39:20

业务需求:需要做到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.coloradmin.cn/o/1170184.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

USB Type-C reference circuit

1.OTG功能&#xff0c;只能对负载供电&#xff0c;不能从电脑端给板子供电 2. USB TTL作为usb串口&#xff0c;可以从电脑端给板子供电 3.USB Type-C power supply,仅仅用来从USB电源得到工作电压。但是外部电源供电电压must supply 12V or greater. 4.功能完整的USB3.0 T…

​实现1个电脑打开多个微信​

实现1个电脑打开多个微信&#xff1a;1、快速双击打开微信&#xff0c;可打开多个微信。2、按住回车键&#xff0c;双击打开微信&#xff0c;并快速放开回车键即可打开多个微信。3、用命令符也可打开多个微信。4、建立一个批处理文件实现打开多个微信。 方法一&#xff1a;最简…

飞书开发学习笔记(一)-应用创建和测试

飞书开发学习笔记(一)-应用创建和测试 一.前言 现在大企业用的办公IM软件中,飞书是口碑最好的&#xff0c;不得不说&#xff0c;字节在开发产品方面&#xff0c;确实有自己独到的竞争力&#xff0c;比如说抖音、头条、飞书。在办公会议和云文档的体验上&#xff0c;其它的办公…

[JavaWeb]——过滤器filter与拦截器Interceptor的使用、执行过程、区别

&#x1f308;键盘敲烂&#xff0c;年薪30万&#x1f308; 目录 一、过滤器filter 概念介绍&#xff1a; 过滤器的使用&#xff1a; 过滤器的执行流程&#xff1a; 应用场景(登录校验)&#xff1a; 二、拦截器Interceptor 概念介绍&#xff1a; 拦截器的使用&#xff1…

智慧建筑工地管理平台源码

智慧工地是聚焦工程施工现场&#xff0c;紧紧围绕人、机、料、法、环等关键要素&#xff0c;综合运用物联网、云计算、大数据、移动计算和智能设备等软硬件信息技术&#xff0c;与施工生产过程相融合。 智慧工地管理平台充分运用数字化技术&#xff0c;聚焦施工现场岗位一线&am…

生成带分表和水印的excel压缩文件

功能描述 将查询结果生成带分表和水印的excel压缩文件 功能点 1、将查询结果导出为excel文件 2、每个表格存放50万条数据&#xff0c;超过50万条数据&#xff0c;生成新的分表 3、生成的表格需要添加水印 4、将生成的全部分表&#xff0c;打包成zip压缩文件 引入依赖 <…

【鸿蒙软件开发】ArkUI之Column、ColumnSplit组件

文章目录 前言一、Column1.1 子组件1.2 接口参数 1.3 属性1.4 示例代码 二、ColumnSplit2.1 子组件2.2 接口2.3 属性2.4 示例代码 总结 前言 Column容器组件&#xff1a;沿垂直方向布局的容器。 ColumnSplit组件&#xff1a;将子组件纵向布局&#xff0c;并在每个子组件之间插…

迈巴赫S480升级主动式氛围灯 浪漫又婉转的气氛

主动式氛围灯有263个可多色渐变的LED光源&#xff0c;营造出全情沉浸的动态光影氛围。结合智能驾驶辅助系统&#xff0c;可在转向或检测到危险时&#xff0c;予以红色环境光提示&#xff0c;令光影艺术彰显智能魅力。配件有6个氛围灯&#xff0c;1个电脑模块。 1、气候&#x…

操作系统的线程模型

操作系统的线程调度有几个重要的概念&#xff1a; 调度器&#xff08;Thread Scheduler&#xff09;&#xff1a;内核通过操纵调度器对内核线程进行调度&#xff0c;并负责将线程的任务映射到各个处理器上内核线程&#xff08;Kernel Level Thread&#xff09;&#xff1a;简称…

企业文件防泄密软件哪个好?文件防泄密软件如何选择

企业文件防泄密软件哪个好&#xff1f;文件防泄密软件如何选择 安企神数据防泄密系统下载使用 在互联网迅速发展的大环境下&#xff0c;数据已经成为企业发展的重要资产之一&#xff0c;然而&#xff0c;随着网络攻击手段的不断升级&#xff0c;企业数据泄露事件屡见不鲜&…

机器学习笔记 - 感知器的数学表达

一、假设前提 感知机(或称感知器,Perceptron)是Frank Rosenblatt在1957年就职于Cornell航空实验室(Cornell Aeronautical Laboratory)时所发明的一种人工神经网络。 它可以被视为一种最简单形式的前馈神经网络,是一种二元线性分类模型,其输入为实例的特征向量,输出为实…

使用Python 脚自动化操作服务器配置

“ 有几十台特殊的服务器&#xff0c;没有合适的批量工具只能手动&#xff0c;要一个一个进行点击设置很耗费时间呀\~”,使用 Python 的简单脚本&#xff0c;即可模拟鼠标键盘进行批量作业 01 — 自动化示例 以某服务器中的添加用户权限为例&#xff0c;演示过程皆未触碰鼠标…

(免费分享)基于springboot,vue社区养老服务管理系统

本课题针对养老机构对养老院日常业务信息管理问题&#xff0c;建立一个社区养老管理平台&#xff0c;基于springboot以及vue框架技术&#xff0c;实现了社区养老管理系统&#xff0c;实现了对养老院的员工、管理员对入住的老人及其健康档案实现信息化管理 获取完整源码&…

基于PHP + MySQL实现的文章内容管理系统源码+数据库,采用前后端分离的模板和标签化方式

文章内容管理系统 dc-article是一个通用的文章内容管理系统&#xff0c;基于开源的caozha-admin开发&#xff0c;采用前后端分离的模板和标签化方式&#xff0c;支持文章内容管理、栏目分类管理、评论管理、友情链接管理、碎片管理、远程图片获取器等功能。可以使用本系统很轻…

sql server 对称加密例子,很好用

-- 创建对称密钥 CREATE MASTER KEY ENCRYPTION BY PASSWORD 输入一个对称密钥; -- 创建证书 CREATE CERTIFICATE MyCertificate WITH SUBJECT 创建一个证书名称; -- 创建对称密钥的加密密钥 CREATE SYMMETRIC KEY MySymmetricKey WITH ALGORITHM AES_128 ENCRY…

静态库的概念及影响

1、目标文件的生成&#xff1a; 由编译器针对源文件编译生成&#xff0c;生成的.o或者.so(动态库)或者.a(静态库)也可以看作是目标文件&#xff1b; 2、静态库的生成&#xff1a; 由给定的一堆目标文件以及链接选项&#xff0c;链接器可以生成两种库&#xff0c;分别是静态库…

Java锁常见面试题

图片引用自&#xff1a;不可不说的Java“锁”事 - 美团技术团队 1 java内存模型 java内存模型(JMM)是线程间通信的控制机制。JMM定义了主内存和线程之间抽象关系。线程之间的共享变量存储在主内存中&#xff0c;每个线程都有一个私有的本地内存&#xff0c;本地内存中存储了该…

PostCSS通过px2rem插件和lib-flexible将px单位转换为rem(root em)单位实现大屏适配

目录 文档postcss中使用postcss-plugin-px2rem安装postcss-plugin-px2rem示例默认配置 webpack中使用postcss-plugin-px2rem项目结构安装依赖文件内容 大屏适配参考文章 文档 类似的插件 postcss-plugin-px2rem https://www.npmjs.com/package/postcss-plugin-px2remhttps://g…

【深度学习基础】Pytorch框架CV开发(2)实战篇

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…

我的大语言模型微调踩坑经验分享

由于 ChatGPT 和 GPT4 兴起&#xff0c;如何让人人都用上这种大模型&#xff0c;是目前 AI 领域最活跃的事情。当下开源的 LLM&#xff08;Large language model&#xff09;非常多&#xff0c;可谓是百模大战。面对诸多开源本地模型&#xff0c;根据自己的需求&#xff0c;选择…