vue3 vxe-table 点击行,不显示选中状态,加上设置isCurrent: true就可以设置选中行的状态。

1、上个图,要实现这样的:

Vxe Table v4.6 官方文档

2、使用 row-config.isCurrent 显示高亮行,当前行是唯一的;用户操作点击选项时会触发事件 current-change

<template><div><p><vxe-button @click="selectRowEvent">设置第二行选中</vxe-button><vxe-button @click="clearSelectEvent">取消选中</vxe-button><vxe-button @click="getCurrentEvent">获取高亮行</vxe-button></p><vxe-tableborderref="tableRef"height="300":row-config="{isCurrent: true, isHover: true}":data="tableData"@current-change="currentChangeEvent"><vxe-column field="name" title="Name"></vxe-column><vxe-column field="sex" title="Sex"></vxe-column><vxe-column field="age" title="Age"></vxe-column><vxe-column field="address" title="Address" show-overflow></vxe-column></vxe-table></div>
</template><script lang="ts" setup>
import { ref } from 'vue'
import { VXETable, VxeTableInstance, VxeTableEvents } from 'vxe-table'interface RowVO {name: stringrole: stringsex: stringage: numbercontent: string
}const tableRef = ref<VxeTableInstance<RowVO>>()const tableData = ref<RowVO[]>([{ name: 'Test1', role: 'Develop', sex: 'Man', age: 28, content: 'test abc' },{ name: 'Test2', role: 'Test', sex: 'Women', age: 41, content: 'Guangzhou' },{ name: 'Test3', role: 'PM', sex: 'Man', age: 32, content: 'Shanghai' },{ name: 'Test4', role: 'Designer', sex: 'Women', age: 24, content: 'Shanghai' }
])const currentChangeEvent: VxeTableEvents.CurrentChange<RowVO> = ({ rowIndex }) => {console.log(`行选中事件 ${rowIndex}`)
}const selectRowEvent = () => {const $table = tableRef.valueif ($table) {$table.setCurrentRow(tableData.value[1])}
}const clearSelectEvent = () => {const $table = tableRef.valueif ($table) {$table.clearCurrentRow()}
}const getCurrentEvent = () => {const $table = tableRef.valueif ($table) {VXETable.modal.alert(JSON.stringify($table.getCurrentRecord()))}
}
</script>

3、设置的时候,加上这个设置就可以了

 :row-config="{ isCurrent: true,  isHover: true}"

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

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

相关文章

【个人记录】pkg可以将Node.js应用打包为可执行文件

背景 之前按客户需求做了一个简易定时任务应用&#xff0c;完成后为方便客户使用需要打包为可执行文件。 pkg工具 pkg 是一个非常流行的工具&#xff0c;它能够将 Node.js 应用打包成独立的可执行文件。它支持多个平台&#xff0c;包括 Windows、macOS 和 Linux。 测试环境…

【SpringBoot】 4 Thymeleaf

官网 https://www.thymeleaf.org/ 介绍 Thymeleaf 是一个适用于 Web 和独立环境的现代服务器端 Java 模板引擎。 模板引擎&#xff1a;为了使用户界面和业务数据分离而产生的&#xff0c;它可以生成特定格式的文档&#xff0c;用于网站的模板引擎会生成一个标准的 html 文档…

Hadoop单机版环境搭建

一 . 案例信息 Hadoop 的安装部署的模式一共有三种&#xff1a; 本地模式&#xff0c;默认的模式&#xff0c;无需运行任何守护进程&#xff08; daemon &#xff09;&#xff0c;所有程序都在单个 JVM 上执行。由 于在本机模式下测试和调试 MapReduce 程序较为方便&#x…

逻辑操作符 、||、!

逻辑操作符为提供逻辑判断的功能&#xff0c;能够构建更复杂的表达式所以有以下三种运算符 &#xff01;&#xff1a;逻辑取反运算符&#xff08;可以改变单个运算符的真假&#xff09;。 &&&#xff1a;逻辑与运算符&#xff0c;就是并且的意思。当两侧均为真的时候…

微信小程序之调查问卷

一、设计思路 1、界面 调查问卷又称调查表&#xff0c;是以问题的形式系统地记载调查内容的一种形式。微信小程序制作的调查问卷&#xff0c;可以在短时间内快速收集反馈信息。具体效果如下所示&#xff1a; 2、思路 此调查问卷采用服务器客户端的方式进行设计&#xff0c;服…

【CodinGame】趣味算法(教学用) CLASH OF CODE -20240726

文章目录 正文字符图形快乐蛇进度条 写在最后END 正文 字符图形 import math import sys# Auto-generated code below aims at helping you parse # the standard input according to the problem statement.zreb int(input())mylist [] for i in range(1, zreb):mylist.app…

Godot入门 03世界构建1.0版

在game场景&#xff0c;删除StaticBody2D节点&#xff0c;添加TileMap节点 添加TileSet图块集 添加TileSet源 拖动图片到图块&#xff0c;自动创建图块 使用橡皮擦擦除。取消橡皮擦后按住Shift创建大型图块。 进入选择模式&#xff0c;TileMap选择绘制&#xff0c;选中图块后在…

一步步教你学会如何安装VMare虚拟机(流程参考图)

前言&#xff1a;一步步教你安装VMare虚拟机&#xff08;此版本为17.5。2版本&#xff09;。 1、安装 2、确认协议 3、选择位置存放 4、选择第二个 5、都不选。 6、都选提供便捷操作 7、点击许可证&#xff0c;将密钥输入&#xff08;可以在网络寻找自己版本的密钥&#xff…

高级及架构师高频面试题-基础型

1、设计模式有哪些原则&#xff08;待解释的更直白&#xff09; 单一职责原则&#xff1a;一个类或方法应只负责一项职责&#xff0c;避免一个类因为多个变化原因而改变。开闭原则&#xff1a;软件实体应对扩展开放&#xff0c;对修改封闭。比如要增加用户类别的时候可以新增一…

【资料分享】2024钉钉杯大数据挑战赛A题思路解析+代码演示

2024第三届钉钉杯大学生大数据挑战赛今天已经开赛&#xff0c;【A题】思路解析代码&#xff0c;资料预览&#xff1a;

Apache Doris + Paimon 快速搭建指南|Lakehouse 使用手册(二)

湖仓一体&#xff08;Data Lakehouse&#xff09;融合了数据仓库的高性能、实时性以及数据湖的低成本、灵活性等优势&#xff0c;帮助用户更加便捷地满足各种数据处理分析的需求。在过去多个版本中&#xff0c;Apache Doris 持续加深与数据湖的融合&#xff0c;已演进出一套成熟…

在Linux、Windows和macOS上释放IP地址并重新获取新IP地址的方法

文章目录 LinuxWindowsmacOS 在Linux、Windows和macOS上释放IP地址并重新获取新IP地址的方法各有不同。以下是针对每种操作系统的详细步骤&#xff1a; Linux 使用DHCP客户端&#xff1a;大多数Linux发行版都使用DHCP&#xff08;动态主机配置协议&#xff09;来自动获取IP地址…

php--高级反序列化

&#x1f3bc;个人主页&#xff1a;金灰 &#x1f60e;作者简介:一名简单的大一学生;易编橙终身成长社群的嘉宾.✨ 专注网络空间安全服务,期待与您的交流分享~ 感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持&#xff01;❤️ &#x1f34a;易编橙终身成长社群&#…

必应快速收录自动提交链接到IndexNow代码

近来发现bing的搜索量也越来越大了&#xff0c;为了更好的对必应进行seo优化&#xff0c;我们可以把最新的网站文章链接提交给必应IndexNow&#xff0c;以此来加快必应快速收录网站文章链接&#xff0c;那么我们我如何使用php代码来实现提交网站文章链接到必应IndexNow呢&#…

【QAC】分布式部署下其他机器如何连接RLM

1、 文档目标 解决分布式部署下其他机器如何连接RLMLicense管理器。 2、 问题场景 分布式部署下QAC要在其他机器上单独运行扫描&#xff0c;必须先连接RLMLicense管理器&#xff0c;如何连接&#xff1f; 3、软硬件环境 1、软件版本&#xff1a;HelixQAC23.04 2、机器环境…

快手可灵视频生成大模型全方位测评

快手视频生成大模型“可灵”&#xff08;Kling&#xff09;&#xff0c;是全球首个真正用户可用的视频生成大模型&#xff0c;自面世以来&#xff0c;凭借其无与伦比的视频生成效果&#xff0c;在全球范围内赢得了用户的热烈追捧与高度评价。截至目前&#xff0c;申请体验其内测…

路由表与IP数据报转发:基础小白指南

目录 1. 路由表的基本概念 2. 路由表中的默认路由 3. IP数据报的转发流程 4. 路由聚合 5. 最长前缀匹配 总结 在网络世界中&#xff0c;IP数据报的转发是如何进行的&#xff1f; 这篇文章将带你深入了解路由表的基本概念和IP数据报的转发流程。我们会用简洁明了的语言和实…

MYSQL 第四次作业

任务要求&#xff1a; 具体操作&#xff1a; 新建数据库&#xff1a; mysql> CREATE DATABASE mydb15_indexstu; Query OK, 1 row affected (0.01 sec) mysql> USE mydb15_indexstu; Database changed 新建表&#xff1a; mysql> CREATE TABLE student( ->…

计算机网络知识-面试点1

1. 三握四挥 定义&#xff1a; 在计算机网络中&#xff0c;特别是TCP/IP协议中&#xff0c;“三握”指的是三次握手&#xff08;Three-way Handshake&#xff09;&#xff0c;而“四挥”则指的是四次挥手&#xff08;Four-way Handshake&#xff09;。这两个过程分别用于TCP连接…

用python程序发送文件(python实例二十六)

目录 1.认识Python 2.环境与工具 2.1 python环境 2.2 Visual Studio Code编译 3.文件上传 3.1 代码构思 3.2 服务端代码 3.3 客户端代码 3.4 运行结果 4.总结 1.认识Python Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设计具…