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

news/2025/3/16 8:58:51/

表格代码

<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的refthis.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是表格refthis.$nextTick(()=>{if(list.length>0){list.forEach((row) => {this.$refs.contractTable.toggleRowSelection(row, true);})}})

效果:


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

相关文章

http的get与post

get方法&#xff1a; 这个网址可以获取配置信息&#xff08;我把部分位置字符改了&#xff0c;现在打不开了&#xff0c;不然会被追责&#xff09; http://softapi.s103.cn/addons/Kmdsoft/Index/config?productwxdk&partner_id111122&osWindows&os_version11&am…

计算机视觉与深度学习-经典网络解析-AlexNet-[北邮鲁鹏]

这里写目录标题 AlexNet参考文章AlexNet模型结构AlexNet共8层&#xff1a;AlexNet运作流程 简单代码实现重要说明重要技巧主要贡献 AlexNet AlexNet 是一种卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;的架构。它是由Alex Krizhevsky、Il…

【产品运营】如何提升B端产品竞争力(下)

“好产品不是能力内核&#xff0c;做好产品的流程才是” 一、建立需求池和需求反馈渠道 需求池管理是B端产品进化最重要的环节&#xff0c;它的重要性远超产品设计、开发等其他环节。 维护需求池有主动和被动两种。 主动维护是产品经理在参与售前、迭代、交付、售后、竞品分…

MAC word 如何并列排列两张图片

系统&#xff1a;MAC os 参考博客 https://baijiahao.baidu.com/s?id1700824516945958911&wfrspider&forpc 步骤1 新建一个word文档和表格 修改表格属性 去掉自动重调尺寸以适应内容 插入图片 在表格的位置插入对应的图片如下 去除边框 最终结果如下

【C++】C++11——构造、赋值使用条件和生成条件

移动构造和移动赋值生成条件移动构造和移动赋值调用逻辑强制生成默认函数的关键字default禁止生成默认函数的关键字delete 移动构造和移动赋值生成条件 C11中新增的移动构造函数和移动赋值函数的生成条件为&#xff1a; 移动构造函数的生成条件&#xff1a;没有自己实现的移动…

TS编译选项——TS代码错误不生成编译文件

一、TS不生成编译文件 在tsconfig.js文件中配置noEmit属性 {"compilerOptions": {// outDir 用于指定编译后文件所在目录"outDir": "./dist", // 将编译后文件放在dis目录下// 不生成编译后的文件"noEmit": true,} } 二、TS代码错…

行为型模式-解释器模式

提供了评估语言的语法或表达式的方式&#xff0c;它属于行为型模式。这种模式实现了一个表达式接口&#xff0c;该接口解释一个特定的上下文。这种模式被用在 SQL 解析、符号处理引擎等。 意图&#xff1a;给定一个语言&#xff0c;定义它的文法表示&#xff0c;并定义一个解释…

阿里云服务器使用教程(从购买到配置再到搭建自己的网站)

阿里云服务器使用教程包括云服务器购买、云服务器配置选择、云服务器开通端口号、搭建网站所需Web环境、安装网站程序、域名解析到云服务器公网IP地址&#xff0c;最后网站上线全流程&#xff0c;阿小云分享阿里云服务器详细使用教程&#xff1a; 目录 阿里云服务器使用教程 …