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

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.kler.cn/a/612700.html

相关文章:

  • 【leetcode hot 100 74】搜索二维矩阵
  • 我的创作纪念日——三周年
  • [识记]Mysql8 远程授权
  • 北斗导航 | 改进奇偶矢量法的接收机自主完好性监测算法原理,公式,应用,RAIM算法研究综述,matlab代码
  • redis部署架构
  • Python----计算机视觉处理(Opencv:直方图均衡化)
  • python之并发编程
  • Vue3 实战:基于 mxGraph 与 WebSocket 的动态流程图构建
  • AugFPN
  • 【Git 暂存操作与升级应用指南】
  • 基于python的4个小游戏(免费直接使用)
  • 用Deepseek写扫雷uniapp小游戏
  • 【sql靶场】过滤绕过第26-27a关保姆级教程
  • 使用LLaMAFactory微调Qwen大模型
  • 27、web前端开发之CSS3(四)
  • Qt MSVC2017连接mysql数据库
  • 网络运维学习笔记(DeepSeek优化版) 022 HCIP-Datacom路由概念、BFD协议详解与OSPF第一课
  • mysqloracledb2 (uuid函数)
  • OpenAI 推出图像生成新突破:GPT-4o 实现图像编辑对话化
  • Charles的安装和使用教程(包含使用Charles进行抓包)