el-table的selection多选表格改为单选

news2024/9/21 22:45:09

需求场景: 选择表格数据时,需要控制单条数据的操作按钮是否禁用。

效果图: 

html代码:

<div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])"
        >切换第二、第三行的选中状态</el-button
      > -->
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
  </div>

js代码:

export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      multipleSelection: [], // 多选存储数据
      checkedSelection: {}, // 单选存储数据
    };
  },
  mounted() {
    document.onclick = () => {
      console.log('单选--checkedSelection', this.checkedSelection);
    }
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 设置单选主要代码
    handleSelectionChange(val) {
      console.log('val--==', val);
      // 默认多选
      // this.multipleSelection = val;

      // 单选
      if(val.length == 1){
        let item = val[val.length -1];
        this.checkedSelection = JSON.parse(JSON.stringify(item));
      }

      // 单选选中多条时,需要清空所选数据
      if(val.length > 1){
        this.$refs.multipleTable.clearSelection(); // 清空选项
        this.$refs.multipleTable.toggleRowSelection(val.pop()); // 选中最后点击的数据
      }

      // 取消选中
      if(val.length == 0){
        this.checkedSelection = {};
      }
    },
  },
};

css代码: 

<style lang="less" scoped>
// 禁用table全选按钮
.table-wrap{
  /deep/.el-table__header{
    .el-checkbox{
      display: none;
    }
  }
}
</style>

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

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

相关文章

excel系列(二) - 利用 easypoi 快速实现 excel 文件导入导出

一、介绍 在上篇文章中&#xff0c;我们介绍了 apache poi 工具实现 excel 文件的导入导出。 本篇我们继续深入介绍另一款优秀的 excel 工具库&#xff1a;easypoi。 二、easypoi 以前的以前&#xff0c;有个大佬程序员&#xff0c;跳到一家公司之后就和业务人员聊上了&…

pip 使用国内镜像源

笔者在清华大学开源软件镜像站&#xff08;https://mirrors.tuna.tsinghua.edu.cn/help/pypi/&#xff09;学到的 我们介绍使用国内清华大学的源&#xff0c;地址为&#xff1a; https://pypi.tuna.tsinghua.edu.cn/simple 我们可以直接在 pip 命令中使用 -i 参数来指定镜像…

单例模式->饿汉模式->懒汉模式->阻塞队列->模拟实现阻塞队列->生产者消费者模型

单例模式->是一种固定套路,类似于"棋谱",按照套路来,可以避免一些问题 单例模式的特点->能够保证在某个类中只存在一个实例,不会创建多个实例 饿汉模式(线程安全):最基础的单例模式,类加载的同时就会创建实例,是线程安全的 public class Singleton {// 在类加…

《云原生安全攻防》-- 容器攻击案例:Docker容器逃逸

当攻击者获得一个容器环境的shell权限时&#xff0c;攻击者往往会尝试进行容器逃逸&#xff0c;利用容器环境中的错误配置或是漏洞问题&#xff0c;从容器成功逃逸到宿主机&#xff0c;从而获取到更高的访问权限。 在本节课程中&#xff0c;我们将详细介绍一些常见的容器逃逸方…

Map系列集合

1.Map集合 1.1Map集合概述和特点 Map集合概述 interface Map<K,V> K&#xff1a;键的类型&#xff1b;V&#xff1a;值的类型 Map集合的特点 双列集合,一个键对应一个值 键不可以重复,值可以重复 Map集合的基本使用 public class MapDemo01 {public static void mai…

服务器数据恢复—raid5阵列热备盘同步失败导致lun不可用的数据恢复案例

服务器存储数据恢复环境&#xff1a; 华为S5300存储中有一组由16块FC硬盘组建的RAID5磁盘阵列&#xff08;包含一块热备盘&#xff09;。 服务器存储故障&#xff1a; 该存储中的RAID5阵列1块硬盘由于未知原因离线&#xff0c;热备盘上线并开始同步数据&#xff0c;数据同步到…

QSpice-(5) .model使用

QSpice-(5) .model使用 Uu们&#xff0c;晚上好&#xff01; 众所周知&#xff0c;Qspice里面的模型非常少&#xff0c;基本上是光秃秃的&#xff0c;想要搞二极管还需要自己去找二极管的模型&#xff0c;但找到模型怎么导进去呢&#xff1f; First one,咱们先放置一个Dio…

数据结构--二叉树遍历

目录 1.介绍 &#xff08;1&#xff09;前序遍历 &#xff08;2&#xff09;定义结构体 &#xff08;3&#xff09;前序遍历实现 &#xff08;4&#xff09;中序遍历实现 &#xff08;5&#xff09;二叉树的节点个数 &#xff08;6&#xff09;二叉树树叶节点个数 &…

写python代码,怎么用工厂模式思维设计接口?

接口的好处 接口就是抽象方法&#xff0c;用来设计后架构&#xff0c;后端开发者和客户端调用者都可以使用这个接口规则同步写代码&#xff0c;客户端调用者&#xff08;app、网页甚至时自动化接口测试&#xff09;不用担心后端对接口的实现细节具体是什么样子的。直接去调用就…

多旋翼+VR眼镜:10寸FPV穿越机技术详解

FPV&#xff08;First Person View&#xff09;穿越机&#xff0c;是指通过第一人称视角来驾驶的无人机&#xff0c;特别强调速度和灵活性&#xff0c;常常用于竞赛、航拍和探索等领域。结合多旋翼设计和VR眼镜&#xff0c;FPV穿越机为用户提供了身临其境的飞行体验。 多旋翼技…

CH552G使用IAP下载

常见下载中的方式ISP&#xff0c;IAP&#xff0c;ICP 参考&#xff0c;CH552G中文手册&#xff0c;参考1 ISP&#xff1a;In System Programing&#xff0c;在系统编程。是常见的&#xff0c;使用软件&#xff0c;先将某个引脚&#xff08;例如boot&#xff09;连接到合适的电…

极狐Gitlab使用(2)

目录 1. Gitlab命令行修改管理员密码 2. Gitlab服务管理 3. 公司的开发代码提交处理流程 4. Gitlab 备份与恢复 数据备份 测试数据恢复 5. 邮箱配置 1. Gitlab命令行修改管理员密码 [roottty01 ~]# gitlab-rails console -e production # 启动GitLab的Rails控制…

白平衡说明

白平衡 相机白平衡的起源原理以及作用起源作用 白平衡的原理白平衡的类型应用说明 工业相机的白平衡效果对比一键白平衡的必要性一键白平衡的实现方式 相机白平衡的起源原理以及作用 起源 白平衡&#xff08;White Balance, WB&#xff09;概念的起源与色温理论密切相关。色温…

Open3D 点云区域生长分割算法

目录 一、基本原理 二、代码实现 三、实现效果 3.1原始点云 3.2分割后点云 前期试读&#xff0c;后续会将博客加入该专栏&#xff0c;欢迎订阅Open3D与点云深度学习的应用_白葵新的博客-CSDN博客 一、基本原理 Open3D 的点云区域生长分割算法是一种基于区域生长的点云分割…

SpringBoot实战:密码处理

Controller层 Operation(summary "保存或更新后台用户信息") PostMapping("saveOrUpdate") public Result saveOrUpdate(RequestBody SystemUser systemUser) {if(systemUser.getPassword() ! null){systemUser.setPassword(DigestUtils.md5Hex(systemUs…

单链表的介绍和实现

前言 Hello,小伙伴们&#xff0c;你们的作者君又回来了&#xff0c;今天我将带领大家继续学习另一种线性表&#xff1a;单链表&#xff0c; 准备好的小伙伴三连打卡上车&#xff0c;你们的支持就是我更新的动力&#xff0c;一定不要吝啬手中的三连哟&#xff0c;万分感谢&…

微服务实战系列之玩转Docker(一)

前言 话说计算机的“小型化”发展&#xff0c;历经了大型机、中型机直至微型机&#xff0c;贯穿了整个20世纪的下半叶。同样&#xff0c;伴随着计算机的各个发展阶段&#xff0c;如何做到“资源共享、资源节约”&#xff0c;也一直是一代又一代计算机人的不懈追求和历史使命。今…

cleanshot Mac 上的截图工具

笔者闲来无事&#xff0c;最近在找一些mac上好用的工具其中一款就是cleanShot。为什么不用原有的mac自带的呢。因为相对来说编辑功能不算全面&#xff0c;不支持长截图。那有没有一款软件支持关于截图的好用工具呢。 所以笔者找了这款。安装包是直接安装就可使用的。请大家点赞…

校验el-table中表单项

需求&#xff1a; 表格中每一行都有几个必填项&#xff0c;如用户提交时有未填的选项&#xff0c;将该选项标红且给出提示&#xff0c;类似el-form 的那种校验 el-table本身并没有校验的方法&#xff0c;而且每一行的输入框也是通过插槽来实现的&#xff0c;因此我们要自己跟…

VUE前端HTML静默打印(不弹出打印对话框)PDF简单方案

前言 在做打印功能的时候&#xff0c;以前大部分客户端都是用C#做的&#xff0c;静默打印&#xff08;也就是不弹出打印对话框&#xff09;比较简单。 但是使用浏览器作为客户端&#xff0c;静默打印&#xff08;也就是不弹出打印对话框&#xff09;做起来就比较困难。困难的…