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

news2025/1/19 8:27:44

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();
}

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

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

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

相关文章

Panasonic松下PLC如何数据采集?如何实现快速接入IIOT云平台?

在工业自动化领域&#xff0c;数据采集与远程控制是提升生产效率、优化资源配置的关键环节。对于使用Panasonic松下PLC的用户来说&#xff0c;如何实现高效、稳定的数据采集&#xff0c;并快速接入IIOT云平台&#xff0c;是摆在他们面前的重要课题。HiWoo Box工业物联网关以其强…

TikTok云手机是什么原理?

随着社交媒体的快速发展和普及&#xff0c;TikTok已成为全球最受欢迎的短视频平台之一&#xff0c;吸引了数以亿计的用户。在TikTok上&#xff0c;许多用户和内容创作者都希望能够更灵活地管理和运营多个账号&#xff0c;这就需要借助云手机技术。那么&#xff0c;TikTok云手机…

通过el-table实现表格穿梭框

element-ui自带的el-transfer界面比较简单&#xff0c;通过el-table实现表格形式的穿梭框功能 首先是效果图 示例图样式比较简单&#xff0c;但是el-table是完全通过div包裹的&#xff0c;所以里面可以自己添加更多的其他组件实现想要的功能 <div style"display: flex…

微信小程序 ---- 慕尚花坊 结算支付

结算支付 01. 配置分包并跳转到结算页面 思路分析&#xff1a; 随着项目功能的增加&#xff0c;项目体积也随着增大&#xff0c;从而影响小程序的加载速度&#xff0c;影响用户的体验。 因此我们需要将 结算支付 功能配置成一个分包&#xff0c; 当用户在访问设置页面时&a…

鸿蒙Harmony应用开发—ArkTS声明式开发(画布组件:Path2D)

路径对象&#xff0c;支持通过对象的接口进行路径的描述&#xff0c;并通过Canvas的stroke接口或者fill接口进行绘制。 说明&#xff1a; 从 API Version 8 开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 addPath addPath(path: path2D,…

【Web技术应用基础】HTML(1)——简单界面

题目1&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title>Hello world</title></head> <body bgcolor"F6F3D6"><!--用HTML语言向世界打声招呼吧&#xff01;--><h1 align&…

windows系统下python进程管理系统

两年来&#xff0c;我们项目的爬虫代码大部分都是放在公司的windows机器上运行的&#xff0c;原因是服务器太贵&#xff0c;没有那么多资源&#xff0c;而windows主机却有很多用不上。为了合理利用公司资源&#xff0c;降低数据采集成本&#xff0c;我在所以任务机器上使用anac…

如何解决node-sass下载用的还是过期的淘宝源?

下载node-sass发现报错过期的证书 把npm的淘宝源换成最新的https://registry.npmmirror.com后发现还是指向了以前的淘宝源&#xff0c;看到一位博主说&#xff0c;单改npm源不够还要改下载node-sass的源&#xff0c;再次搜索另外一位博主提供了命令npm config ls可以使用它来查…

Http 超文本传输协议基本概念学习摘录

目录 HTTP协议 超文本传输协议 HyperText超文本 HTML超文本标记语言 HTTP协议原理 请求发送 服务器处理 响应发送 连接关闭或保持 HTTP协议版本 HTTP/0.9 HTTP/1.0 HTTP/1.1 HTTP/2 HTTP/3 HTTP请求方法 GET POST PUT DELETE HEAD OPTIONS HTTP请求头字…

模拟算法总述

模拟 1.模拟算法介绍 模拟算法通过模拟实际情况来解决问题&#xff0c;一般容易理解但是实现起来比较复杂&#xff0c;有很多需要注意的细节&#xff0c;或者是一些所谓很”麻烦”的东西。 模拟题一般不涉及太难的算法&#xff0c;一般就是由较多的简单但是不好处理的部分组成…

xinference - 大模型分布式推理框架

文章目录 关于 xinference使用1、启动 xinference设置其他参数 2、加载模型3、模型交互 其它报错处理 - transformer.wte.weight 关于 xinference Xorbits Inference&#xff08;Xinference&#xff09;是一个性能强大且功能全面的分布式推理框架。 可用于大语言模型&#xff…

【重温设计模式】状态模式及其Java示例

状态模式的基本概念 在编程世界的大海中&#xff0c;各种设计模式就如同灯塔&#xff0c;为我们的代码编写指明方向。其中&#xff0c;状态模式是一种行为设计模式&#xff0c;它让你能在一个对象的内部状态改变时改变其行为&#xff0c;使得对象看起来就像改变了其类一样。这…

Flink中任务(Tasks)和任务槽(Task Slots)详解

Flink中任务&#xff08;Tasks&#xff09;和任务槽&#xff08;Task Slots&#xff09;详解 任务槽&#xff08;Task Slots&#xff09; Flink中每一个worker(也就是TaskManager)都是一个JVM进程&#xff0c;它可以启动多个独立的线程&#xff0c;来并行执行多个子任务&#…

从零开始搭建游戏服务器 第四节 MongoDB引入并实现注册登录

这里写目录标题 前言正文添加依赖安装MongoDB添加MongoDB相关配置创建MongoContext类尝试初始化DB连接实现注册功能测试注册功能实现登录逻辑测试登录流程 结语下节预告 前言 游戏服务器中, 很重要的一点就是如何保存玩家的游戏数据. 当一个服务端架构趋于稳定且功能全面, 开发…

Spring单元测试+Mockito

一&#xff0c;背景 单元测试基本上是开发逃不过的一个工作内容&#xff0c;虽然往往因为过于无聊&#xff0c;或者过于麻烦&#xff0c;而停止于项目的迭代之中&#xff0c;不了了之了。其实不是开发们懒&#xff0c;而是上头要求的测试覆盖率高&#xff0c;但是又没有好用的…

zookeeper快速入门(合集)

zookeeper作为一个分布式协调框架&#xff0c;它的创建就是为了方便或者简化分布式应用的开发。除了服务注册与发现之外&#xff0c;它还能够提供更多的功能&#xff0c;但是对于入门来说&#xff0c;看这一篇就够了。后续会讲zookeeper的架构设计与原理&#xff0c;比如zookee…

MySQL 数据库设计范式

第一范式&#xff08;1NF&#xff09; 每一列都是不可分割的原子数据项第二范式&#xff08;2NF&#xff09; 在1NF的基础上&#xff0c;非码属性必须完全依赖于候选码(在1NF基础上消除非主属性对主码的部分函数依赖) 1.函数依赖A->B&#xff0c;如果通过A属性(属性组)的值…

[LeetBook]【学习日记】排序算法——归并排序

主要思想 归并排序是一种分治算法&#xff0c;其排序过程包括分和治分是指将要排序的序列一分为二、二分为四&#xff0c;直到单个序列中只有一个数治是指在分完后&#xff0c;将每两个元素重新组合&#xff0c;四合为二、二合为一&#xff0c;最终完成排序 图片作者&#xf…

python 实现把内层文件夹的文件,复制/剪切到外层文件夹

文章目录 如下图所示&#xff0c;收集了很多省市的文件&#xff0c;结果发现市一级的文件与区县一级的文件混在一起了。 接下来使用代码实现&#xff1a; 根据关键词识别出 市一级的文件&#xff1b;把市一级的文件&#xff0c;移动或者复制到省文件夹下&#xff1b;给出了py…

FPGA高端项目:FPGA基于GS2971+GS2972架构的SDI视频收发+GTX 8b/10b编解码SFP光口传输,提供2套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐本博主所有FPGA工程项目-->汇总目录本博已有的 SDI 编解码方案本方案的SDI接收发送本方案的SDI接收图像缩放应用本方案的SDI接收纯verilog图像缩放纯verilog多路视频拼接应用本方案的SDI接收HLS图像缩放HLS多路视频拼接应用本方案的SDI…