el-table-column默认选中一个复选框和只能单选事件

news2024/11/18 4:47:40

表格代码

<el-table ref="contractTable" v-loading="loading" :data="contractList" @selection-change="contractSelectionChange" style="margin-top: 10%;">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="id" prop="id" width="180%" v-if="false"/>
        <el-table-column label="合同编号" prop="contractNo" width="180%" />
        <el-table-column label="合同名称" prop="contractName" :show-overflow-tooltip="true" width="180%" />
        <el-table-column label="合同金额" prop="contractAmount" :show-overflow-tooltip="true" width="100%" />
        <!-- <el-table-column label="显示顺序" prop="roleSort" width="100" /> -->
      </el-table>

单选事件

contractSelectionChange(selection) {
      const val = selection;
      this.contarctSelect = val.map(item => item.id);
      //单选,contractList是表格数据,contractTable是el-table的ref
      this.contractList.forEach(item => {
        if (val[val.length - 1] === item) {
          this.$refs.contractTable.toggleRowSelection(item, true)
        } else {
          this.$refs.contractTable.toggleRowSelection(item, false)
        }
      });
      
    },

默认选中事件

            //创建一个空数组用来存放默认数据
            let list = [];
            //response.data[8][0]请求返回的一条数据,将id保存起来(这步可有可无)
            this.contarctDefSelectId = response.data[8][0].id;
            //遍历表格的数据,再遍历需要在表格中反显的数据,两者的id一致
            //contractList是表格数据
            this.contractList.forEach((item) => {
                    if (response.data[8][0].contractId == item.id) {
                      // 把判断出来的默认表格数据push到创建的数组中
                        list.push(item);
                    }
            });
            //contractTable是表格ref
            this.$nextTick(()=>{
              if(list.length>0){
                list.forEach((row) => {
                  this.$refs.contractTable.toggleRowSelection(row, true);
                })
              }
            })

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1032626.html

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

相关文章

【Linux】系统编程线程互斥与同步(C++)

目录 【1】线程互斥 【1.1】进程线程间的互斥相关背景概念 【1.2】互斥量mutex 【1.3】互斥量实现原理探究 【1.4】RAII的加锁风格 【2】可重入VS线程安全 【2.1】概念 【2.2】常见的线程不安全的情况 【2.3】常见的线程安全的情况 【2.4】常见不可重入的情况 【2.5…

【golang】深入理解GMP调度模型

Goroutine Go中&#xff0c;协程被称为goroutine&#xff0c;它非常轻量&#xff0c;一个goroutine只占几KB&#xff0c;并且这几KB就足够goroutine运行完&#xff0c;这就能在有限的内存空间内支持大量goroutine&#xff0c;支持了更多的并发&#xff0c;虽然一个goroutine的…

基于YOLOv8模型的条形码二维码检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型的条形码二维码检测系统可用于日常生活中检测与定位条形码与二维码目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测…

Ubuntu 12.04增加右键命令:在终端中打开增加打开文件

Ubuntu 12.04增加右键命令&#xff1a;在终端中打开 软件中心&#xff1a;搜索nautilus-open-terminal安装 用快捷键CtrlT打开命令行输入&#xff1a; sudo apt-get install nautilus-open-terminal 重新加载文件管理器 nautilus -q 或注销再登录即要使用

一文弄懂基于采样的路径规划-RRT系列(python代码)

基于采样的路径规划算法-RRT系列 VX关注晓理紫并回复rrt获取代码 [晓理紫] 1、基于采样的路径规划算法 基于抽样的规划方法&#xff08;或称概率方法&#xff09;通过在连续 C 空间中逐步或批量抽样&#xff0c;构建由离散 C 空间样本连接的树或图&#xff0c;从而捕捉解空间的…

飞书应用配置+蓝鲸流水线+jump server

开发者后台创建应用 配置应用基础信息&#xff0c;权限&#xff0c;安全等 管理后台 设置应用在工作台的可见范围和其他设置 Linux 常用命令&#xff1a;Linux 常用命令, ll 文件夹下文件&#xff0c;ls 文件&#xff0c;cd进入目录&#xff0c; cat 查看文件&#xff0c; v…

php反序列化+题

含义&#xff1a; php序列化&#xff08;serialize&#xff09;&#xff1a;是将变量转换为可保存或传输的字符串的过程php反序列化&#xff08;unserialize&#xff09;&#xff1a;就是在适当的时候把这个字符串再转化成原来的变量使用这两个过程结合起来&#xff0c;可以轻…

微信小程序底部安全区域高度获取

CSS 属性 safe-area-inset-bottom safe-area-inset-bottom 就是安全区的高度 padding-bottom:env(safe-area-inset-bottom); wx.getSystemInfoSync() wx.getSystemInfoSync()可以获取系统信息 let system wx.getSystemInfoSync() let bottomSafe system.screenHeight -…

React 全栈体系(十三)

第七章 redux 五、redux 异步编程 1. 理解 redux 默认是不能进行异步处理的,某些时候应用中需要在 redux 中执行异步任务(ajax, 定时器) 2. 使用异步中间件 npm install --save redux-thunk 3. 代码 - 异步 action 版 3.1 store /* src/redux/store.js */ /*** 该文件专…

全景剖析|国产芯(CPU、GPU、SSD、NAND、DRAM)虽有突破,但路还很长

这两天小编看到两个有关国产芯的消息,很有感触,本文小编分享下所思所想,如有不当之处,还望包涵,可以留言指正! 第一个消息是:近日,华为轮值主席 徐直军在2023世界计算大会上,有个国产芯的呼吁,“我们不要抱有幻想,应该坚定不移的打造可持续发展的计算产业生态。从计…

Webpack打包时Bable解决浏览器兼容问题

当我们使用js新特性语法编写代码时&#xff0c;在旧的浏览器中兼容性并不好。但是我们希望能够在旧浏览器中使用这些新特性。 使用babel可以使js新代码转换为js旧代码&#xff0c;增加浏览器的兼容性。 如果我们希望在Webpack中支持babel&#xff0c;则需要在Webpack中引入bab…

【C++】静态成员函数 ( 静态成员函数概念 | 静态成员函数声明 | 静态成员函数访问 | 静态成员函数只能访问静态成员 )

文章目录 一、静态成员函数简介1、静态成员函数概念2、静态成员函数声明3、静态成员函数访问4、静态成员函数只能访问静态成员 二、代码示例 - 静态成员函数 一、静态成员函数简介 1、静态成员函数概念 静态成员函数归属 : 在 C 类中 , 静态成员函数 是一种 特殊的函数 , 该函数…

记一次manjaro-i3系统sogoupinying候选词无法正常显示中文(变方框了)问题解决方案

记一次manjaro-i3系统sogoupinying候选词无法正常显示中文&#xff08;变方框了&#xff09;问题解决方案 前言解决方案 前言 今天早上发现公司电脑显卡驱动好像坏了&#xff0c;各种折腾完了干脆把系统搞黑屏无法开机了&#xff0c;时间有限懒再修了&#xff0c;于是重装了系…

【C++面向对象侯捷下】1.导读

文章目录 来源&#xff1a;我的百度网盘 百科全书 专家书籍 C标准库 C编译器

解锁学习新方式——助您迈向成功之路

近年来&#xff0c;随着吉林开放大学广播电视大学的崛起&#xff0c;越来越多的学子选择这所优秀的学府来实现自己的梦想。而作为一名学者&#xff0c;我有幸见证了电大搜题微信公众号的诞生&#xff0c;为广大学子提供了一个全新的学习支持平台。 电大搜题微信公众号&#xff…

解决老版本Oracle VirtualBox 此应用无法在此设备上运行问题

问题现象 安装华为eNSP模拟器的时候&#xff0c;对应的Oracle VirtualBox-5.2.26安装的时候提示兼容性问题&#xff0c;无法进行安装&#xff0c;具体版本信息如下&#xff1a; 软件对应版本备注Windows 11专业工作站版22H222621eNSP1.3.00.100 V100R003C00 SPC100终结正式版…

Android studio安卓生成APK文件安装包方法

1.点击Build->Generate Signed Bundle/APK 2.选择APK 3.首次生成&#xff0c;没有jks文件&#xff0c;就点击Create new。再次生成&#xff0c;直接点Next 4.选择创建jks文件路径 5.点击Next 6.选择release 7.生成完成的apk安装包路径

PostgreSql 统一修改date字段为timestamp

在《Powdersigner PostgreSql 同步表结构到pg数据库》中&#xff0c;导入表结构到pg数据后&#xff0c;发下时间对不上了。mysql的datetime转换后pg的变成了date了。 再同步到数据后&#xff0c;就变成日期类型了。 因为表中基本都有创建时间和修改时间&#xff0c;两个相对固…

电脑桌面透明便签软件是哪个?

在现代快节奏的工作环境中&#xff0c;许多上班族都希望能够在电脑桌面上方便地记录工作资料、重要事项、工作流程等内容。为了解决这个问题&#xff0c;一款优秀的电脑桌面便签软件是必不可少的。在选择桌面便签软件时&#xff0c;许多用户也希望便签软件能够与电脑桌面壁纸相…

文件操作(1)

1. 为什么使⽤⽂件&#xff1f; 如果没有⽂件&#xff0c;我们写的程序的数据是存储在电脑的内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失 了&#xff0c;等再次运⾏程序&#xff0c;是看不到上次程序的数据的&#xff0c;如果要将数据进⾏持久…