el-table下的复选框关联勾选

server/2025/4/1 7:46:38/

 效果展示:

  <el-table style="height: 500px;" :data="tableData" border empty-text="暂无数据" v-loading="loading":header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" show-overflow-tooltipref="multipleTable" @select="handleSelection" @select-all="handleCount"><el-table-column type="selection" width="40" fixed="left" />
</el-table>
// 多选
const checkId = ref([]);  
const multipleTable = ref()
// 手动勾选单选的情况
const handleSelection = (val) => {if (checkId.value.length > val.length) {// 取消选中let checkAll = checkId.value;checkId.value = val;checkAll.forEach((item) => {let v = val.find(i => i.qdfphm === item.gl_qdfphm);  //关联的条件if (v === undefined && item.gl_qdfphm != '') {multipleTable.value.toggleRowSelection(item, false);checkId.value = val.filter(v => item.id != v.id)}})} else {// 选中checkId.value = val;let v = val[val.length - 1];if (v.gl_qdfphm != '') {let vv = tableData.value.find(item => item.qdfphm == v.gl_qdfphm)  //关联的条件multipleTable.value.toggleRowSelection(vv, true);checkId.value.push(vv);}}if (chooseTab.value == 1) {badgeTotal.value.total_supply = checkId.value.length} else if (chooseTab.value == 2) {badgeTotal.value.total_delete = checkId.value.length}
}
// 手动勾选全选情况(计算总数)
const handleCount = (val) => {checkId.value = val;
}

总结:重点在toggleRowSelection()方法


http://www.ppmy.cn/server/179031.html

相关文章

FPGA_YOLO学习(一)

一&#xff1a;CNN学习 首先对CNN&#xff08;卷积神经网络&#xff09;进行学习。 CNN笔记&#xff1a;通俗理解卷积神经网络_cnn卷积神经网络-CSDN博客 https://blog.csdn.net/v_JULY_v/article/details/51812459?fromshareblogdetail&sharetypeblogdetail&share…

《AI大模型趣味实战 》第7集:多端适配 个人新闻头条 基于大模型和RSS聚合打造个人新闻电台(Flask WEB版) 1

AI大模型趣味实战 第7集&#xff1a;多端适配 个人新闻头条 基于大模型和RSS聚合打造个人新闻电台(Flask WEB版) 1 摘要 在信息爆炸的时代&#xff0c;如何高效获取和筛选感兴趣的新闻内容成为一个现实问题。本文将带领读者通过Python和Flask框架&#xff0c;结合大模型的强大…

第六届电气、电子信息与通信工程国际学术会议 (EEICE 2025)

重要信息 官网&#xff1a;www.eeice.net&#xff08;点击了解参会投稿等&#xff09; 时间&#xff1a;2025年4月18-20日 地点&#xff1a;中国-深圳技术大学 简介 第六届电气、电子信息与通信工程 (EEICE 2025&#xff09;将于2025年4月18-20日在中国深圳召开。 EEICE 20…

LLaMA Factory对大模型微调和导出量化操作

LLaMA Factory 是一个简单易用且高效的大型语言模型&#xff08;Large Language Model&#xff09;训练与微调平台。通过 LLaMA Factory&#xff0c;可以在无需编写任何代码的前提下&#xff0c;在本地完成上百种预训练模型的微调&#xff0c;框架特性包括&#xff1a; 模型种类…

gitlab回退到指定提交记录

查询提交记录的版本号 方式一&#xff1a;在gitlab上查看 回退 git reset --hard 9188295b1aabd8ac03d260c5cd23afc5f699d8a5 将回退结果推送到远端 git push -f 验证&#xff1a;查看master分支的提交记录

【leetcode hot 100 20】有效的括号

解法一&#xff1a;使用栈 class Solution {public boolean isValid(String s) {int n s.length();if(n%2!0){return false;}// 定义map&#xff0c;便于查找对应的括号Map<Character, Character> map new HashMap<>();map.put(),();map.put(],[);map.put(},{);…

selenium之基础整理

安装步骤 1&#xff0c;在pycharm中下载selenium库&#xff1a;pip install selenium 2&#xff0c;把下载的chromedriver.exe驱动解压放到python根目录下&#xff08;如果没有检测到该驱动&#xff0c;可以把将chromedriver.exe配置到环境变量path中&#xff09; &#xff08;…

Ubuntu AX200 iwlwifi-cc-46.3cfab8da.0.tgz无法下载的解决办法

文章目录 前言一、检查网卡是否被识别二、确认内核模块是否可用1.AX200 wifi 要求内核5.12.检查 iwlwifi.ko 是否存在&#xff1a;3.如果未找到&#xff0c;可能是内核模块未正确生成。尝试安装 linux-modules-extra&#xff1a;4.再次检查 iwlwifi.ko 是否存在&#xff1a;5.确…