当前位置: 首页 > 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()方法

相关文章:

  • 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优化,如何进行索引优化
  • 洪纬读《制造三文鱼》丨毒素缠身的水生鸡
  • 英国地方选举结果揭晓,工党保守党皆受挫
  • 张建华评《俄国和法国》|埃莲娜·唐科斯的俄法关系史研究
  • 陈颖已任上海黄浦区委常委、统战部部长
  • 来上海喝云南咖啡!上海国际咖啡文化节助力咖啡产业破圈出海
  • 来论|受美国“保护”,日本民众要付出什么代价?