实现el-table 两列多选框且不可同时勾选,可单选,可多选

news2024/11/26 10:31:43

1.页面实现效果:

审核通过可批量处理,可单选;审核不通过,单选,但两者不可同时勾选☑️

2.代码如下

<template lang="pug">
.financing-order-tab
  .table-container
    .btns(style="margin-bottom: 15px")
        el-button(type="primary" size="mini", @click="handleCheck") 批量初审
        el-button(type="primary" size="mini", @click="handleReview") 批量复审
    el-table.no-wrap-cell(:data="tableData",ref="multipleTable",style="width: 100%", size="small" show-summary, :summary-method="getSummaries",@selection-change="handleSelectionChange",:row-key="getRowKey")
      el-table-column(fixed="left", label="审核通过",width="60",align="center")
        el-table-column(fixed="left",type="selection",align="center", width="60", :selectable="disableSelect")
      el-table-column(fixed="left", label="审核不通过",width="60",align="center",:render-header="renderCustomHeader")
        template(slot-scope="scope")
          el-checkbox(:disabled="disableRow(scope.row)",v-model="scope.row.isChecked",@change="handleSecondColumnCheckboxChange(scope.$index, scope.row)")
      el-table-column(prop="projectCode", label="项目编号", width="180")
      el-table-column(prop="orgName", label="服务商", width="180")
      el-table-column(prop="stationDetailAddress", label="预约安装详细地址", width="180")
      el-table-column(prop="realCapacity", label="装机容量(W)", width="100")
        template(slot-scope="{row}") {{row.realCapacity}}
</template>

<script>

export default {
  data() {
    return {
      tableData: [],  
      passList: [],
      rejectList: [],
      firstColumnSelection: [], // 第一列选中项
      secondColumnSelection: new Set(), // 使用Set来存储第二列选中项的索引,方便去重
      customSelections: [], // 第二列自定义选中项
      loading: false,
    }
  },

  created() {
  },
  methods: {
    getRowKey(row) {
      return row.id // 假设每行数据都有唯一的 'id' 字段
    },

    handleSelectionChange (rows) {
      this.firstColumnSelection = rows
      rows.map(item => this.tableData.indexOf(item)).forEach(el => {
        Array.from(this.secondColumnSelection).length && Array.from(this.secondColumnSelection).forEach(ele => {
          if (el === ele) {
            // 当选中第一列的时候,自动取消第二列对应行的选中状态
            this.$set(this.tableData[el], 'isChecked', false)
            this.secondColumnSelection.delete(ele)
            this.customSelections = this.tableData.filter((row, index) => this.secondColumnSelection.has(index))
          }
        })
      })
    },

    disableSelect(row) {
      return row.loanAuditStatus === 'WAIT_AUDIT' || row.loanAuditStatus === 'WAIT_REVIEW'
    },
    disableRow(row) {
      if (row.loanAuditStatus === 'WAIT_AUDIT' || row.loanAuditStatus === 'WAIT_REVIEW') {
        return false
      } else {
        return true
      }
    },

    handleSecondColumnCheckboxChange(index, row) {
      // 切换第二列的选中状态
      if (this.secondColumnSelection.has(index)) {
        this.secondColumnSelection.delete(index)
      } else {
        this.secondColumnSelection.add(index)
      }
      // 当第二列选中项变化时,自动取消第一列对应行的选中状态
      if (this.secondColumnSelection.has(index)) {
        const rowIndex = this.tableData.findIndex(row => this.tableData.indexOf(row) === index)
        this.$refs.multipleTable.toggleRowSelection(this.tableData[rowIndex], false)
      }
      this.customSelections = this.tableData.filter((row, index) => this.secondColumnSelection.has(index))
    },

    renderCustomHeader(h, { column, $index }) {
      return h('span', '审核不通过')
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-form::v-deep{
  .el-input--mini{
    width: 175px;
  }
}
.table-container {
  margin-top: 20px;
  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2061071.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Tomcat使用及负载均衡(最全源码安装及配置使用教程)

目录 一 Tomcat概述 1.1 Tomcat 简介 1.2 Tomcat 下载 二 Tomcat 单主机配置 2.1 Tomcat 环境配置 2.2 Tomcat 安装与添加系统启动 2.3 Tomcat 启动与停止 三 Tomcat 配置文件及反向代理 3.1 配置文件详解 3.2 反向代理实现Tomcat部署 四 Memcached安装 4.1 简介 …

Ollama 企业私有化部署大模型最佳解决方案

为什么要私有化部署大模型&#xff1f; 很多企业为了控制成本和减少核心数据外泄的风险&#xff0c;会通过私有化部署大模型&#xff0c;来控制成本和保障企业的数据安全。 说到本地化部署&#xff0c;这时就需要说到Ollama框架了。 Ollama 是什么&#xff1f; Ollama 是一个开…

霸王茶姬小程序任务脚本

霸王茶姬小程序任务脚本 小白操作----仅供学习研究参考 功能&#xff1a; 积分签到 解析 该脚本用于“霸王茶姬小程序”的签到和积分查询操作。通过模拟网络请求登录账号&#xff0c;获取个人信息&#xff0c;执行每日签到&#xff0c;并查询积分情况。支持多账号操作&#…

3.js - 使用着色器实现各种图形

有更多案例&#xff0c;私我 main.js import * as THREE from three import { OrbitControls } from three/examples/jsm/controls/OrbitControls import * as dat from dat.gui import { GUI } from three/examples/jsm/libs/lil-gui.module.min.js// ts-ignore import basi…

一篇初学者入门Python匿名函数与Lambda表达式详细教程

首先要了解了如何定义和使用函数的参数,以及如何从一个函数返回值.这篇文章将深入介绍Python中的“匿名函数”和“Lambda表达式”,这两个概念在实际编程中非常有用 如果你对Python感兴趣的话&#xff0c;可以试试我整理的这一份全套的Python学习资料&#xff0c;【点击这里】免…

数据库表转为库表设计文档

开发完之后&#xff0c;就一大堆文档需要写的&#xff0c;其中就有库表设计文档&#xff0c;所以直接写个接口&#xff0c;直接把库表转为库表设计文档就行&#xff0c;省一大堆时间摸鱼了。直接贴代码。 pom文件引入依赖 <!--引入数据库表结构文档生成器Screw依赖--> &…

《驾驭未来:大型语言模型的理论与实践》—— 探索大模型的奥秘

在这个信息爆炸的时代&#xff0c;人工智能尤其是大型语言模型&#xff08;LLM&#xff09;已经成为推动科技进步的关键力量。无论是科学研究、商业应用还是日常生活&#xff0c;大型语言模型都在不断地改变着我们的世界。对于那些渴望深入了解这一前沿技术的人来说&#xff0c…

JAVA实现单词词频统计-辅助英文考试学习

一、基于GUI的可以自行输入的英文单词词频统计软件

SpingBoot集成kafka发送读取消息

SpingBoot集成kafka开发 kafka的几个常见概念 1、springboot和kafka对应版本&#xff08;重要&#xff09;2、创建springboot项目&#xff0c;引入kafka依赖2.1、生产者EventProducer2.2、消费者EventConsumer2.3、启动生产者的方法SpringBoot01KafkaBaseApplication2.4、appli…

小程序学习day10-自定义组件的data数据、方法、属性,data与properties的关系、自定子组件之数据监听器

39、WXS脚本&#xff08;小程序独有的一套脚本语言&#xff09;&#xff08;续&#xff09; &#xff08;6&#xff09;自定义组件的data数据、方法、属性 1&#xff09;自定义组件的data数据&#xff08;在小程序组件中&#xff0c;用于组件模版渲染的私有数据&#xff09; …

定格精彩瞬间!详解六自由度技术原理及应用

在体育赛事中&#xff0c;观赏各项目的精彩瞬间&#xff0c;欣赏运动员的卓越表现是观众们最为关注的焦点。以体操跳马为例&#xff0c;运动员们全力助跑&#xff0c;然后奋力起跳、腾空&#xff0c;接着精准的推手和转体动作&#xff0c;最后稳稳落地&#xff0c;整个动作行云…

【JAVA CORE_API】Day19 多线程API(2)、多线程并发安全问题、同步

多线程API 进程和线程 进程&#xff1a;进程就像是一个程序在电脑里运行时的一个实例。你可以把它想象成一个独立的小工人&#xff0c;专门负责完成某项任务&#xff08;比如打开浏览器、播放音乐&#xff09;。每个进程都有自己独立的资源&#xff08;比如内存&#xff09;和…

python 可迭代,迭代器,生成器,装饰器

1. 可迭代&#xff08;Iterable&#xff09; 可迭代 是指一个对象可以返回一个迭代器的对象。也就是说&#xff0c;它实现了 __iter__() 方法或 __getitem__() 方法。常见的可迭代对象有列表、元组、字符串、字典和集合。 from collections.abc import Iterablei 100 s &qu…

墙裂推荐!云上机密计算,阿里云上体验了一下海光内存加密和远程认证

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 机密计算目录 前言1、构…

哈希原理实现

本节主要看源代码实现 哈希特点 哈希&#xff08;Hashing&#xff09;是一种将数据映射到固定大小的表中以实现快速查找的数据结构和算法方法。哈希的主要特点包括&#xff1a; 1. 高效的查找、插入和删除 时间复杂度&#xff1a;哈希表通常提供近乎常数时间的查找、插入和…

app安全评估报告的常见留存措施(内附独家资料)

对用户账号、操作时间、操作类型、网络源地址和目标地址、网络源端口、客户端硬件特征等日志信息以及用户发布信息记录的留存措施 1**. 用户账号信息**&#xff1a;我们将用户账号信息安全存储&#xff0c;只有授权的人员能够访问。这些信息包括用户名、电子邮件地址等&#xf…

【C++ 面试 - 面向对象】每日 3 题(六)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏&…

VAuditDemo审计之二次注入漏洞

目录 VAuditDemo二次注入漏洞 搜索危险函数&#xff0c;用户可控点 regCheck.php messageSub.php message.php 漏洞调用链 漏洞错误利用过程 注册用户 xxxx, 发表payload留言 漏洞正确利用过程 注册用户 wwww\ 退出用户 wwww\\ 使用 wwww\ 登录 发表留言 替换dat…

《javaEE篇》--定时器

定时器概念 当我们不需要某个线程立刻执行&#xff0c;而是在指定时间点或指定时间段之后执行&#xff0c;假如我们要定期清理数据库里的一些信息时&#xff0c;如果每次都手动清理的话就太麻烦&#xff0c;所以就可以使用定时器。定时器就可以比作一个闹钟&#xff0c;可以让…

C++ 设计模式(6. 适配器模式)

适配器模式Adapter Pattern是一种结构型设计模式&#xff0c;它可以将一个类的接口转换成客户希望的另一个接口&#xff0c;主要目的是充当两个不同接口之间的桥梁&#xff0c;使得原本接口不兼容的类能够一起工作。基本结构 Target 是目标接口&#xff0c;Adaptee 是需要适配的…