vue+elementui中table实现单选行功能

el-table插件可以选择行,但是只能多选,而项目中有单选的需求。
效果如下图所示,点击行或者点击复选框都可以选中行(高亮,复选框选中),并且每次只选中当前行,之前选中的行清空。点击标题行的复选框则清空选中行。

效果动图

el-table设置。

<el-table :data="proList"ref="tableRef"@row-click="rowClick"@select-all="selectAll"@select="(selection,row)=>rowClick(row)"height="calc(100vh - 120px)":header-cell-style="{background:'#F5F9FB ',color:'#333'}"border><el-table-column type="selection" width="50" align="center"></el-table-column><el-table-column prop="id" label="项目id" align="center"></el-table-column><el-table-column prop="projectName" label="项目名称" align="center"></el-table-column><el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
</el-table>

函数。其中,selectedRows是自定义的一个数组,用于放置选中的行对象信息,以便在项目中其他地方使用。

/*** table行点击事件*/
rowClick(row, column, event) {this.selectedRows = []this.$refs.tableRef.clearSelection()this.selectedRows.push(row)this.$refs.tableRef.toggleRowSelection(row)
},/*** 选择所有checkbox点击事件*/
selectAll(selection) {this.$refs.tableRef.clearSelection();this.selectedRows = []
}

有问题评论区回复。。。。能解决的回复。。。。不能解决的自己百度哈。。。。。

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

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

相关文章

Elasticsearch:让你的 Elasticsearch 索引与 Python 和 Google Cloud Platform 功能保持同步

作者&#xff1a;来自 Elastic Garson Elasticsearch 内的索引 (index) 是你可以将数据存储在文档中的位置。 在使用索引时&#xff0c;如果你使用的是动态数据集&#xff0c;数据可能会很快变旧。 为了避免此问题&#xff0c;你可以创建一个 Python 脚本来更新索引&#xff0…

端口如何映射到外网?

在现代信息化社会中&#xff0c;远程访问已经成为人们工作和生活中不可或缺的一部分。复杂的网络环境和网络限制可能会给远程连接带来不便。在这种情况下&#xff0c;端口映射到外网的技术应运而生。本文将介绍端口映射到外网的概念、应用场景以及一种优秀的解决方案——【天联…

Docker-安装

Docker ⛅Docker-安装&#x1f320;各平台支持情况&#x1f320;Server 版本安装☃️Ubuntu☃️Centos &#x1f320;Docker 镜像源修改&#x1f320;Docker 目录修改 ⛅Docker-安装 &#x1f320;各平台支持情况 &#x1f320;Server 版本安装 ☃️Ubuntu &#x1f342;安装…

LiveGBS流媒体平台GB/T28181功能-HTTPS 服务支持配置开启什么时候需要开启HTTPS测试SSL证书配置HTTPS测试证书

LiveGBS功能支持HTTPS 服务支持配置开启什么时候需要开启HTTPS测试SSL证书配置HTTPS测试证书 1、配置开启HTTPS1.1、准备https证书1.1.1、选择Nginx类型证书下载 1.2、配置 LiveCMS 开启 HTTPS1.2.1 web页面配置1.2.2 配置文件配置 2、HTTPS测试证书3、验证HTTPS服务4、为什么要…

Visual Studio 2013 - 清理

Visual Studio 2013 - 清理 1. 清理1.1. 工程清理1.2. 解决方案清理 References 1. 清理 Debug Release 1.1. 工程清理 (right mouse click on the project) -> 清理 1.2. 解决方案清理 (right mouse click on the solution) -> 清理解决方案 References [1] Yongq…

Vue技能树总结01

Vue vs React 相似之处: 它们都有使用 Virtual DOM&#xff1b;提供了响应式&#xff08;Reactive&#xff09;和组件化&#xff08;Composable&#xff09;的视图组件。将注意力集中保持在核心库&#xff0c;而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更…

记录C++中,子类同名属性并不能完全覆盖父类属性的问题

问题代码&#xff1a; 首先看一段代码&#xff1a;很简单&#xff0c;就是BBB继承自AAA&#xff0c;然后BBB重写定义了同名属性&#xff0c;然后调用父类AAA的打印函数&#xff1a; #include <iostream> using namespace std;class AAA { public:AAA() {}~AAA() {}void …

网络货运平台有哪些

网络货运平台有运满满、货拉拉、快狗打车、滴滴货运、货运宝、G7、货骑士、云鸟配送、积微物联、中储智运等。 运满满 运满满创立于2013年&#xff0c;是国内首家基于云计算、大数据、移动互联网和人工智能技术开发的货运调度平台&#xff0c;是公路物流领域高新技术综合应用…

线性代数基础概念和在AI中的应用

基本概念 线性代数是数学的一个分支&#xff0c;专注于向量、向量空间&#xff08;也称为线性空间&#xff09;、线性变换和矩阵的研究。这些概念在数据科学、人工智能、工程学和物理学等多个领域都有广泛应用。以下是这些基本概念的详细解释和它们在数据处理和AI中的应用。 …

开发微信小程序被鹅厂背刺

最近在开发微信小程序&#xff0c;没来得及更文。等开发完成后&#xff0c;给大家写保姆帖系列。刚刚看到一张动图&#xff0c;忍不住分享给大家。属实反映了鹅厂风格了。

PX4|基于FAST-LIO mid360的无人机室内自主定位及定点悬停

目录 前言环境配置运行fast-lio修改px4位置信息融合方式编写位置坐标转换及传输节点 前言 在配置mid360运行环境后&#xff0c;可使用mid360进行室内的精准定位。 环境配置 在livox_ros_driver2的上级目录src下保存fast-lio的工程 git clone https://github.com/hku-mars/F…

python问题:vscode切换环境,pip安装库网络错误,不使用anaconda安装库

python问题&#xff1a;vscode切换环境&#xff0c;pip安装库网络错误 vscode切换环境pip安装库网络错误 不使用anaconda安装库 记录一下遇见的python问题。 vscode切换环境 在vscode上面的搜索框输入 > select interpreter然后选择需要的环境。 pip安装库网络错误 用…

web前端之多种方式实现switch滑块功能、动态设置css变量、after伪元素、选择器、has伪类

MENU 效果图htmlcsshtmlcssJS 效果图 htmlcss html <div class"s"><input type"checkbox" id"si" class"si"><label for"si" class"sl"></label> </div>style * {margin: 0;pad…

lftp服务与http服务(包含scp服务)详解

目录 前言: 1.lftp服务 1.1lftp服务的介绍以及应用场景 1.2安装lftp服务 1.2进行配置 1.3实际操作 2.http服务 2.1http服务介绍以及应用场景 2.1安装httpd服务 2.2进行配置 2.3实际操作 3.scp服务 3.1scp服务的介绍以及应用场景 致谢: 前言: 在当今互联网…

蓝桥杯模块综合——高质量讲解AT24C02,BS18B20,BS1302,AD/DA(PCF8591),超声波模块

AT24C02——就是一个存储的东西&#xff0c;可以给他写东西&#xff0c;掉电不丢失。 void EEPROM_Write(unsigned char * EEPROM_String,unsigned char addr , unsigned char num) {IIC_Start();IIC_SendByte(0xA0);IIC_WaitAck();IIC_SendByte(addr);IIC_WaitAck();while(nu…

arm 解决Rk1126 画框颜色变色问题(RGB转NV12)

在Rv1126上直接对Nv12图像进行绘制时&#xff0c;颜色是灰色。故将Nv12转BGR后绘制图像&#xff0c;绘制完成后转成Nv12&#xff0c;BGR的图像颜色是正常的&#xff0c;但是NV12的图像颜色未画全&#xff0c;如图&#xff1a; 1.排查发现是RGB转NV12的函数出现问题&#xff0c…

理清大数据技术与架构

大数据并不是一个系统软件&#xff0c;更不是一个单一的软件&#xff0c;它实际上是一种技术体系、一种数据处理方法&#xff0c;甚至可以说是一个服务平台。在这个技术体系中&#xff0c;涵盖了许多不同的部件&#xff0c;比如Hadoop服务平台。这一服务平台可以根据具体情况自…

微软AI系列 C#中实现相似度计算涉及到加载图像、使用预训练的模型提取特征以及计算相似度

在C#中实现相似度计算涉及到加载图像、使用预训练的模型提取特征以及计算相似度。你可以使用.NET中的深度学习库如TensorFlow.NET来加载预训练模型&#xff0c;提取特征&#xff0c;并进行相似度计算。 以下是一个使用TensorFlow.NET的示例&#xff1a; using System; using …

【源码&教程】基于GAN的动漫头像生成系统

1.研究背景 我们都喜欢动漫角色&#xff0c;并试图创造我们的定制角色。然而&#xff0c;要掌握绘画技巧需要巨大的努力&#xff0c;之后我们首先有能力设计自己的角色。为了弥补这一差距&#xff0c;动画角色的自动生成提供了一个机会&#xff0c;在没有专业技能的情况下引入定…

【测试开发学习流程】MySQL函数运算(中)(下)

前言&#xff1a; 这些天还要搞毕业论文&#xff0c;东西少了点&#xff0c;大家将就看看QWQ 目录 1 MySQL的数据处理函数 1.1 文本处理函数 1.2 日期与时间函数 1.3 数值处理函数 1.4 系统函数 2 聚集运算 2.1 聚集函数 2.2 流程函数 1 MySQL的数据处理函数 MySQL支…