当前位置: 首页 > news >正文

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

 效果展示:

  <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-tooltip
      ref="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.dtcms.com/a/88176.html

相关文章:

  • thinkphp8.0\swoole的websocket应用
  • MySQL: 创建两个关联的表,用联表sql创建一个新表
  • 电机控制常见面试问题(十八)
  • vulntarget_a 训练笔记
  • 人工智能赋能:生成式游戏的未来趋势
  • 响应式 Web 设计:HTML 与 CSS 协同学习的进度(二)
  • 2025-03-24 学习记录--C/C++-PTA 习题7-7 字符串替换
  • 预测蓝桥杯16届嵌入式省赛客观题
  • 【进阶编程】Avalonia、MAUI、Uno Platform、Flutter、Electron、Qt 和 Tauri 的详细对比
  • CPP中的numeric库中的accumulate求和函数说明
  • Python----计算机视觉处理(Opencv:绘制图像轮廓:寻找轮廓,findContours()函数)
  • 深入剖析ReLU激活函数:特性、优势与梯度消失问题的解决之道,以及Leaky ReLU 和 Parametric ReLU
  • Python和json
  • PTA 1105-链表合并(C++)
  • 大模型的后训练(post-training)方法
  • 【区块链通用服务平台及组件】绿信链 | FISCO BCOS 应用案例
  • 分布式环境下的重复请求防护:非Redis锁替代方案全解析
  • 智能汽车图像及视频处理方案,支持视频智能包装能力
  • ARCGIS PRO DSK 栅格数据(Raster)
  • sql优化,如何进行索引优化
  • 卷积神经网络 - LeNet-5
  • API架构风格
  • 【Javaweb】b站黑马视频学习笔记
  • 分布式限流方案:基于 Redis 的令牌桶算法实现
  • labview加载matlab数据时报错提示:对象引用句柄无效。
  • netplan是如何操控NetworkManager的? 笔记250324
  • 内网(域)渗透测试流程和模拟测试day--2--漏洞利用getshell
  • Mellanox 网卡的工作模式自动化修改脚本(实战生产,复制即可使用)
  • 在 Jenkins Pipeline 中利用 Groovy 的闭包特性创建自定义语法糖
  • c++malloc出来的对象调用构造-------定位new