el-table实现单选和隐藏全选框和回显数据

0 效果

在这里插入图片描述

1 单选

<el-table ref="clientTableRef" @selection-change="clientChangeHandle">
  <el-table-column fixed type="selection" width="50" align="center" />
  <el-table-column label="客户名称" align="center" prop="clientName" />
  <el-table-column label="客户类型" align="center" prop="clientTypeName" />
  <el-table-column label="业务类型" align="center" prop="businessTypeName" />
  <el-table-column label="区域" align="center" prop="regionDetail" />
</el-table>
clientChangeHandle(selection) {
  this.clientIds = []
  if (selection.length > 1) {
    this.$refs.clientTableRef.clearSelection()
    this.$refs.clientTableRef.toggleRowSelection(selection[selection.length - 1])
  }
  this.clientIds = selection[selection.length - 1] ? [selection[selection.length - 1]] : []
},

2 隐藏全选框

1. 通过修改样式不起作用

.el-table__header-wrapper .el-checkbox {
  visibility: hidden; // 不起作用
  display: none; // 不起作用
}

2. 动态添加样式

<el-table :header-cell-class-name="hideSelectAll">
  <el-table-column fixed type="selection" width="50" align="center" />
  <el-table-column label="客户名称" align="center" prop="clientName" />
  <el-table-column label="客户类型" align="center" prop="clientTypeName" />
  <el-table-column label="业务类型" align="center" prop="businessTypeName" />
  <el-table-column label="区域" align="center" prop="regionDetail" />
</el-table>
hideSelectAll({ row, cloumn, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    return "hideSelectAll";
  }
}
::v-deep {
    .hideSelectAll .cell {
       visibility: hidden;
    }
}

3 回显

回显数据要在el-table中添加两个属性
在这里插入图片描述

if (this.clients.length != 0) {
  this.clientTableData.forEach(row => {
    if (row.id == this.clients[0].id) {
      this.$refs.clientTableRef.toggleRowSelection(row, true);
    }
  })
}

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

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

相关文章

Python进行多线程爬取数据通用模板

首先&#xff0c;我们需要导入所需的库&#xff0c;包括requests和BeautifulSoup。requests库用于发送HTTP请求&#xff0c;BeautifulSoup库用于解析HTML文档。 import requests from bs4 import BeautifulSoup然后&#xff0c;我们需要定义一个函数来发送HTTP请求并返回响应。…

C# 异步日志记录类,方便下次使用,不用重复造轮子

先定义接口类&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace 异常 {internal interface ILog{Task WriteErrorLog(string message);Task WriteInfoLog(string message);Task W…

python实现FINS协议的TCP服务端(篇一)

python实现FINS协议的TCP服务端是一件稍微麻烦点的事情。它不像modbusTCP那样&#xff0c;可以使用现成的pymodbus模块去实现。但是&#xff0c;我们可以根据协议帧进行组包&#xff0c;自己去实现帧的格式&#xff0c;而这一切可以基于socket模块。本文为第一篇。 一、了解FI…

MATLAB绘图中文显示为方框

MATLAB绘图中文显示为方框 MATLAB显示英文和字母没有问题&#xff0c;但是当显示中文时会显示乱码&#xff0c;中文显示为方框&#xff0c;如下图&#xff1a; 可以在绘图命令中添加如下代码&#xff1a; set(gca,Fontname,Monospaced); 例如&#xff1a; % 滤波器系数%低通…

【EI会议征稿】第三届能源动力与控制工程国际学术会议(EPECE 2024)

第三届能源动力与控制工程国际学术会议&#xff08;EPECE 2024&#xff09; The 3rd International Conference on Energy and Power Engineering, Control Engineering (EPECE 2024) 第三届能源动力与控制工程国际学术会议&#xff08;EPECE 2024&#xff09;将于2024年2月2…

卫星遥感·格物致知丨卫星遥感的力量——自然灾害监测的太空之眼—洪涝灾害监测

遥感卫星从太空感知地球和获取地球表面的信息&#xff0c;当前有上千颗遥感卫星每天不停的对地表成像&#xff0c;其数据广泛用于地球系统科学研究、资源环境管理、国土安全和自然灾害监测等领域。卫星遥感的优势有监测范围大、不受区域地形限制、重复观测和多种类型数据(感知多…

MySQL -- 事务管理

MySQL – 事务管理 文章目录 MySQL -- 事务管理一、理解事务1.如果CURD不加控制&#xff0c;会有什么问题2.事务的概念 二、MySQL中的事务1.事务的版本支持2.事务提交方式3.事务常见操作方式3.1.事务的开始与回滚3.2.证明未commit&#xff0c;客户端崩溃&#xff0c;MySQL自动会…

Vite - 配置 - 不同的环境执行不同的配置文件

目标描述 通过不同的命令&#xff0c;执行不同的环境的配置文件中的内容&#xff1a; npm run dev : 执行开发环境的配置文件 npm run build: 执行生产环境的配置文件 环境文件准备 为了在不同的环境中使用不同的配置文件&#xff0c;我们将配置文件拆分开来。 开发环境使用开发…

【优选算法系列】【专题五位运算】第二节.371. 两整数之和and137. 只出现一次的数字 II

文章目录 前言一、两整数之和 1.1 题目描述 1.2 题目解析 1.2.1 算法原理 1.2.2 代码编写二、只出现一次的数字 II 2.1 题目描述 2.2 题目解析 2.2.1 算法原理 2.2.2 代码编写总结 前言 一、两整数之和 …

采集Prestashop独立站采集Prestashop独立站

import java.net.URL 这一行导入了Java.net包中的URL类&#xff0c;这个类在处理URL链接时非常有用。 import org.jsoup.Jsoup 这一行导入了Jsoup库&#xff0c;它是一个强大的HTML和XML文档解析库&#xff0c;我们可以使用它来解析网页内容。 import org.jsoup.nodes.Docume…

显卡服务器租用价格受哪些因素影响

显卡服务器也叫做GPU服务器&#xff0c;是一种有高性能显卡的服务器系统&#xff0c;显卡服务器能在大数据处理、科学计算等领域有很好的性能表现。今天小编就给大家讲一讲显卡服务器租用价格受哪些因素影响呢&#xff1f; 1.显卡类型和数量&#xff1a;一般说来中高端显卡的租…

pytorch搭建squeezenet网络的整套工程(升级版)

上一篇当中&#xff0c;使用pytorch搭建了一个squeezenet&#xff0c;效果还行。但是偶然间发现了一个稍微改动的版本&#xff0c;拿来测试一下发现效果会更好&#xff0c;大概网络结构还是没有变&#xff0c;还是如下的第二个版本&#xff1a; 具体看网络结构代码&#xff1a…

编译内核源码

本文将记录内核源码编译步骤&#xff0c;供有需要的人参考使用。 一、内核源码下载网址 内核源码网址&#xff1a;https://kernel.org/ 二、准备编译环境 这里需要注意区分x86架构和arm架构&#xff0c;需要不同的架构内核就准备对应的服务器即可&#xff0c;在服务器上安装…

Jupyter Notebook快速上手

Jupyter Notebook快速上手 文章目录 Jupyter Notebook快速上手1 运行Jupyter Notebook1.1 通过图形化界面打开1.2 通过命令行打开1.3 在指定项目目录下打开 2 Jupyter Notebook运行后无法自动打开网页3 Jupyter Notebook运行代码没反应4 退出4.1 终端退出4.2 命令行退出 此教程…

Linux安装git和maven——拉取代码 --> mvn打包成jar包 --->运行jar包

前言 我们知道最后的代码都是要运行在Linux系统中的&#xff0c;所以就需要在Linux中安装git&#xff0c;从而能够拉取代码&#xff0c;安装maven&#xff0c;从而能够进行项目的打包。 本篇博客以centos为例&#xff0c;介绍如何安装git&#xff0c;安装maven3.8&#xff0c…

【编程实践】黑框框里的打字小游戏,但是汇编语言

开始&#xff1a; 在学习王爽的《汇编语言》的过程中&#xff0c;我就真切地体会到编程实践对于理解的帮助。起初我没有安装书中的实验环境&#xff0c;看到100页左右就开始感觉无趣、吃力&#xff0c;看了后面忘前面&#xff0c;差点就要放弃这本书的学习。好在我后来还是装好…

React 递归手写流程图展示树形数据

需求 根据树的数据结构画出流程图展示&#xff0c;支持新增前一级、后一级、同级以及删除功能&#xff08;便于标记节点&#xff0c;把节点数据当作label展示出来了&#xff0c;实际业务中跟据情况处理&#xff09; 文件结构 初始数据 [{"ticketTemplateCode": &…

数据结构:Map和Set(1)

搜索树 概念 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值 它的左右子树也分别为二叉搜索树 这棵树的中序遍历结果是有序的 接下来我们来模拟一棵二叉搜索树&#xff0c…

【Java】本地开发环境正常、测试或生产环境获取的文件路径不对的问题

引 Java 中经常获取本地文件或者resource下的文件&#xff0c;要获取文件&#xff0c;首先要获得本地路径。 Java 本身或一些开源工具包都提供了很多获取路径的方法。但使用时经常遇到本地开发环境正常、测试或生产环境获取的文件路径不对的问题。 本文将列出几种常见的获取…

盘点那些开发中经常用到的git命令

入职第一天 配置邮箱账号 git config —global user.email "XXXX" git config —global user.name "XXXX" 生成公钥 ssh-keygen -t rsa -C "你的邮箱"生成的文件默认在c盘:/用户/当前用户/.ssh文件夹下&#xff0c;也可以指定文件 打开git网页&…