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

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

效果图: 

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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【vue+el-table】实现表尾合计行分两行显示,一行显示勾选项之和,一行显示合计,已实现,具体思路解析

效果图&#xff1a; 思路解析&#xff1a; 首先进行了el-table列表的组件封装&#xff0c;很多参数是传进来的。如果是普通的列表&#xff0c;相关参数直接定义就行 1、使用el-table的summary-method处理表尾行 &#xff08;1&#xff09;定义summaryIndex用于指定合计在哪一列…

【Springboot】新增profile环境配置应用启动失败

RT 最近接手了一个新的项目&#xff0c;为了不污染别人的环境&#xff0c;我新增了一个自己的环境配置。结果&#xff0c;在启动的时候总是失败&#xff0c;就算是反复mvn clean install也是无效。 问题现象 卡住无法进行下一步 解决思路 由于之前都是能启动的&#xff0c…

防火墙小试——部分(书接上回)NAT

toop接上回 1.实验拓扑及要求 前情回顾 DMZ区内的服务器&#xff0c;办公区仅能在办公时间内&#xff08;9&#xff1a;00 - 18&#xff1a;00&#xff09;可以访问&#xff0c;生产区的设备全天可以访问. 生产区不允许访问互联网&#xff0c;办公区和游客区允许访问互联网 …

【Linux】常用命令总结(updating)

1.date2.du&#xff08;disk use&#xff09;3.df&#xff08;disk free&#xff09;4.find5.crontab6.netstat shell命令可以使用man查看命令文档说明&#xff0c;说明界面中可通过b(backward)向上翻页&#xff0c;f(forward)向下翻页&#xff0c;g(go to)跳到说明首页&#x…

五层模型讲解

TCP/IP 模型协议分层: 应用层: HTTP: 超文本传输协议(网站访问web)(Apache、nginx)(IIS)e FTP : 文件传输协议(网络文件传输)&#xff0c; TFTP: 简单文件传输协议(交换机和路由器系统重装)&#xff08;和console线有关&#xff09; SMTP:简单邮件传输协议(发信) POP3:邮…

Azure Repos 仓库管理

从远端仓库克隆到本地 前提:本地要安装git,并且登录了账户 1.在要放这个远程仓库的路径下,打git 然后 git clone https://.. 如果要登录验证,那就验证下 克隆完后,cd 到克隆的路径, 可以用 git branch -a //查看分支名 git status //查看代码状态 删除…

【Linux网络】poll{初识poll / poll接口 / poll vs select / poll开发多客户端echo服务器}

文章目录 1.初识pollpoll与select的主要联系与区别poll的原理poll的优点poll的缺点poll vs select 2.poll开发多客户端echo服务器封装套接字接口Makefile主函数日志服务聊天服务器 1.初识poll poll是Linux系统中的一个系统调用&#xff0c;它用于监控多个文件描述符&#xff08…

qtcrerator,代码屏蔽了,断点还是能进去,新增的代码没反应。编译无报错,无异常

qtcrerator&#xff0c;代码屏蔽了&#xff0c;断点还是能进去&#xff0c;新增的代码没反应。编译无报错&#xff0c;无异常 办法都试过了&#xff0c;没有用。无法生产新的exe 原因&#xff1a;我把工程复制了一份&#xff0c;然后改了工程名 结果分析&#xff1a;编译运行…

Perl之正则表达式

正则表达式(regular expression)描述了一种字符串匹配的模式&#xff0c;可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。   Perl语言的正则表达式功能非常强大&#xff0c;基本上是常用语言中最强大的&#xff0c;很多语言…

vscode常用组件

1.vue-helper 启用后点击右下角注册&#xff0c;可以通过vue组件点击到源码里面 2.【Auto Close Tag】和【Auto Rename Tag】 3.setting---Auto Reveal Exclude vscode跳转node_modules下文件&#xff0c;没有切换定位到左侧菜单目录> 打开VSCode的setting配置&#xff…

Umi.js 项目中使用 Web Worker

1.配置 Umi.js 在 Umi.js 中&#xff0c;需要通过配置来扩展 Webpack 的功能。在项目根目录下修改 config/config.ts 文件&#xff1a; export default defineConfig({chainWebpack(config) {config.module.rule(worker).test(/\.worker\.ts$/).use(worker-loader).loader(wo…

vue2使用MarkDown的回显与生成自定义目录

最终实现效果图&#xff1a; 1.回显markdown 1.1安装mark npm install marked -s 1.2使用 //导入 import {marked} from marked // data(){return{textDatas: "",} },methods: {getData() {//获取数据axios({url: "http://localhost:8889/articles/view/158…

操作系统科普与入门之进程篇

文章目录 ⭐前言一、浅谈OS的各个管理模块对应的硬件资源二、从OS的各个管理模块浅谈进程管理2.1 什么是进程&#xff1f;2.2 我知道进程是啥啦&#xff0c;那么OS怎么知道进程的呢&#xff1f; 三、OS是如何进行进程管理&#xff1f;3.1 进程状态转换3.1.1 创建态3.1.2 运行态…

深度学习5 神经网络

生物神经网络是指人的大脑&#xff0c;这是人工神经网络的技术原型。根据生物神经网络的原理&#xff0c;人们用计算机复现了简化的神经网络。当然&#xff0c;人工神经网络是机器学习的一大分支。 1.基本组成 1.1神 经 元 神经元是神经网络的基本组成。激活函数又称作激励函…

所有权与生命周期:Rust 内存管理的哲学

所有权与生命周期&#xff1a;Rust内存管理的哲学 博主寄语引言&#xff1a;编程语言的内存管理困境与 Rust 的解决方案。所有权基本概念&#xff1a;资源的绝对主权生命周期的理解与应用&#xff1a;编译时的守护神借用与引用的精妙设计&#xff1a;安全与效率的和谐共舞Rust …

VL02N 创建过账时删除订单号显示

VL02N 删除订单号显示 VL02N 交货过账 删除 交货单 & 物料凭证 & 会计凭证 上的订单号值 目录 VL02N 删除订单号显示 目录 交货单订单号值删除物料凭证订单号值删除会计凭证订单号删除 删除BSEG表的订单号值删除ACDOCA表的订单号值 交货单订单号值删除 增强点L…

WSL-Ubuntu20.04训练环境配置

1.YOLOv8训练环境配置 训练环境配置的话就仍然以YOLOv8为例&#xff0c;来说明如何配置深度学习训练环境。这部分内容比较简单&#xff0c;主要是安装miniAnaconda以及安装torch和torchvision. 首先是miniAnaconda的安装(参考官网的教程Miniconda — Anaconda )&#xff0c;执行…

记录些Spring+题集(1)

接口防刷机制 接口被刷指的是同一接口被频繁调用&#xff0c;可能是由于以下原因导致&#xff1a; 恶意攻击&#xff1a;攻击者利用自动化脚本或工具对接口进行大量请求&#xff0c;以消耗系统资源、拖慢系统响应速度或达到其他恶意目的。误操作或程序错误&#xff1a;某些情…

蓝牙定位系统有什么优势?有哪些强大功能?

蓝牙定位系统研发出来后&#xff0c;为企业和员工带来了很大的便利&#xff0c;极大推动了厂区安全稳定的发展。该系统由于实用性广泛&#xff0c;例如&#xff1a;消防、医院、养老院、化工厂等地都可以看到他的身影&#xff0c;快速精准的定位&#xff0c;不仅省时省力而且还…