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.mzph.cn/web/49696.shtml

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

相关文章

C++入门基础(超详细) 需:C语言基础

1.C的发展史 大致了解一下 C的起源可以追溯到1979年&#xff0c;当时BjarneStroustrup(本贾尼斯特劳斯特卢普&#xff0c;这个翻译的名字不 同的地方可能有差异)在贝尔实验室从事计算机科学和软件工程的研究工作。面对项目中复杂的软件开 发任务&#xff0c;特别是模拟和操作系…

Microsoft SEAL迭代器(iterator)分析

安全之安全(security)博客目录导读 目录 par PolyIter, RNSIter 和 CoeffIter par PtrIter 和 StrideIter par IterTuple par 常见的 PtrIter 类型的别名 par 创建 SEAL 迭代器 par 使用 ReverseIter 反转方向 par SEAL_ITERATE par 编码约定 par 常见函数的迭代器重…

动态接口调优:在Mojo模型中调整模型的输入输出接口

动态接口调优&#xff1a;在Mojo模型中调整模型的输入输出接口 在机器学习领域&#xff0c;Mojo模型通常指代一个经过训练、准备部署的模型。模型的输入输出接口&#xff08;I/O&#xff09;是模型与外界交互的桥梁&#xff0c;其设计直接影响到模型的可用性和灵活性。本文将探…

Linux权限维持篇

目录 SSH后门 &#xff08;1&#xff09;软链接sshd &#xff08;2&#xff09;SSH Key 生成公私钥 创建个authorized_keys文件来保存公钥 通过修改文件时间来隐藏authorized_keys &#xff08;3&#xff09;SSH Keylogger&#xff08;记录日志&#xff09; Linux的PA…

【Go系列】Go的UI框架Fyne

前言 总有人说Go语言是一门后端编程语言。 Go虽然能够很好地处理后端开发&#xff0c;但是者不代表它没有UI库&#xff0c;不能做GUI&#xff0c;我们一起来看看Go怎么来画UI吧。 正文 Go语言由于其简洁的语法、高效的性能和跨平台的编译能力&#xff0c;非常适合用于开发GUI…

MICA:面向复杂嵌入式系统的混合关键性部署框架

背景 在嵌入式场景中&#xff0c;虽然 Linux 已经得到了广泛应用&#xff0c;但并不能覆盖所有需求&#xff0c;例如高实时、高可靠、高安全的场合。这些场合往往是实时操作系统的用武之地。有些应用场景既需要 Linux 的管理能力、丰富的生态&#xff0c;又需要实时操作系统的高…

vue中scoped详解以及样式穿透>>>、/deep/、::v-deep

1、scoped scoped属性用于限制样式仅应用于当前组件。当一个style标签拥有scoped属性时&#xff0c;它的CSS样式就只能作用于当前的组件&#xff0c;通过该属性&#xff0c;可以使得组件之间的样式不互相污染。 原理&#xff1a;当样式中加了scoped属性时候&#xff0c;编译的…

数据库解析一维和二维简易JSON,

项目还在使用Oracle11&#xff0c;不支持后续官方的json解析方式&#xff0c; 在 前年、去年、今年 接连 遇到json解析问题后&#xff08;其实是公司的轮子效率太慢&#xff0c;太复杂&#xff0c;决定自己造个轮子&#xff0c;看看到底为什么慢&#xff0c;是不是真的很复杂&a…

【最新】cudnn安装教程

最近换了新电脑需要重新安装cuda和cudnn&#xff0c;发现现在cudnn的安装比以前方便多了&#xff0c;直接在官网下载exe安装包一键运行即可。安装的时候注意cuda和cudnn的对应关系即可&#xff1a;【最新】cuda和cudnn和显卡驱动的对应关系-CSDN博客 访问cudnn下载链接cuDNN 9…

Git 基础 GitHub【学习笔记】

一、Git 优势 大部分操作在本地完成&#xff0c;不需要联网完整性保证尽可能添加数据而不是删除或修改数据分支操作非常快捷流畅与 Linux 命令全面兼容 二、Git 程序安装 https://git-scm.com 三、Git 结构 #mermaid-svg-9Go6R1leWXWrDCqn {font-family:"trebuchet ms&quo…

Redis面试三道题目

针对Redis的面试题&#xff0c;我将从简单到困难给出三道题目&#xff0c;并附上参考答案的概要。 1. 简单题&#xff1a;请简述Redis是什么&#xff0c;以及它的主要优点。 参考答案&#xff1a; Redis简介&#xff1a;Redis是一个开源的、使用ANSI C语言编写、支持网络、可…

TCP/IP and Ethernet

目录 1. What is Internet?2. Ethernet2.1. Physical Layer(PHY)2.2. MACMAC帧格式MAC地址与IP地址2.3. RGMII接口3. TCP/IP3.1. Network Layer3.1.1. ARPARP工作过程ARP帧格式3.1.2. IP3.2. Transport Layer3.2.1. ICMP3.2.2. UDP3.2.3. TCP手把手教你学达芬奇&达芬奇Pro…

C#中GridControl的数据源双向绑定

1. 什么是双向数据绑定&#xff1f; 双向数据绑定是一种允许我们创建持久连接的技术&#xff0c;使模型数据和用户界面(UI)之间的交互能够自动同步。这意味着当模型数据发生变化时&#xff0c;UI会自动更新&#xff0c;反之亦然。这种双向数据绑定极大地简化了UI和模型数据之间…

C++STL简介(二)

目录 1.模拟实现string 1.string基本属性和大体框架 2.基本函数 2.1size&#xff08;&#xff09; 2.2 [] 2.3 begin() 和end() 2.4capacity&#xff08;&#xff09; 2.5 reserve 2.6push_back 2.7 append 2.8 2.9insert 2.10find 2.11substr 2.12 2.12 < …

运维锅总详解NFS

NFS是什么&#xff1f;如何对NFS进行部署及优化&#xff1f;NFS工作流程是什么&#xff1f;NFS的性能及优缺点是什么&#xff1f;NFS发展历史又是怎样的&#xff1f;希望本文能帮您解答这些疑惑&#xff01; 一、NFS简介 NFS (Network File System) 是由 Sun Microsystems 在…

论文精读(保姆级解析)—— Flash Diffusion

0 前言 今天分析的论文是《Flash Diffusion: Accelerating Any Conditional Diffusion Model for Few Steps Image Generation》。该论文发表在2024年&#xff0c;目前已开源在arxiv上&#xff0c;主要提出了一种高效、快速且多功能的蒸馏方法&#xff0c;用于加速预训练扩散模…

[C++][STL源码剖析] 详解AVL树的实现

目录 1.概念 2.实现 2.1 初始化 2.2 插入 2.2.1 旋转&#xff08;重点&#xff09; 左单旋 右单旋 双旋 2.❗ 双旋后&#xff0c;对平衡因子的处理 2.3 判断测试 完整代码&#xff1a; 拓展&#xff1a;删除 1.概念 二叉搜索树虽可以缩短查找的效率&#xff0c;但…

遇到Websocket就不会测了?别慌,学会这个Jmeter插件轻松解决....

websocket 是一种双向通信协议&#xff0c;在建立连接后&#xff0c;websocket服务端和客户端都能主动向对方发送或者接收数据&#xff0c;而在http协议中&#xff0c;一个request只能有一个response&#xff0c;而且这个response也是被动的&#xff0c;不能主动发起。 websoc…

【研路导航】保研英语面试高分攻略,助你一路过关斩将

面试攻略之 千锤百炼英语口语 写在前面 在保研面试中&#xff0c;英语口语往往是让许多同学感到头疼的一部分。如何在面试中展现出自信和流利的英语表达能力&#xff0c;是我们今天要探讨的主题。以下是一些有效的英语口语练习方法和常见题型解析&#xff0c;帮助你在保研面试…

Redis 7.x 系列【31】LUA 脚本

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 常用命令2.1 EVAL2.2 SCRIPT LOAD2.3 EVALSHA2.4 SCRIPT FLUSH2.5 其他 3. …