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}"
相关文章:
vue3 vxe-table 点击行,不显示选中状态,加上设置isCurrent: true就可以设置选中行的状态。
1、上个图,要实现这样的: Vxe Table v4.6 官方文档 2、使用 row-config.isCurrent 显示高亮行,当前行是唯一的;用户操作点击选项时会触发事件 current-change <template><div><p><vxe-button click"sel…...
Linux没有telnet 如何测试对端的端口状态
前段时间有人问uos没有telnet,又找不到包。 追问了一下为什么非要安装telnet,答复是要测试对端的端口号。 这里简单介绍一下,测试端口号的方法有很多,telent只是在windows上经常使用,linux已很少安装并使用该命令&…...
花几千上万学习Java,真没必要!(二十九)
1、基本数据类型包装类: 测试代码1: package apitest.com; //使用Integer类的不同方法处理整数。 //将字符串转换为整数(parseInt)和Integer对象(valueOf), //将整数转换回字符串(…...
C#如何引用dll动态链接库文件的注释
1、dll动态库文件项目生成属性中要勾选“XML文档文件” 注意:XML文件的名字切勿修改。 2、添加引用时XML文件要与DLL文件在同一个目录下。 3、如果要是添加引用的时候XML不在相同目录下,之后又将XML文件复制到相同的目录下,需要删除引用&am…...
WordPress原创插件:自定义文章标题颜色
插件设置截图 文章编辑时,右边会出现一个标题颜色设置,可以设置为任何颜色 更新记录:从输入颜色css代码,改为颜色选择器,更方便! 插件免费下载 https://download.csdn.net/download/huayula/89585192…...
Unity分享:继承自MonoBehaviour的脚步不要对引用类型的字段在声明时就初始化
如果某些字段在每个构造函数中都要进行初始化,很多人都喜欢在字段声明时就进行初始化,对于一个非继承自MonoBehaviour的脚步,这样做是没有问题的,然而继承自MonoBehaviour后就会造成内存的浪费,为什么呢?因…...
.NET Core中如何集成RabbitMQ
在.NET Core中集成RabbitMQ主要涉及到几个步骤,包括安装RabbitMQ的NuGet包、建立连接、定义队列、发送和接收消息等。下面是一个简单的指南来展示如何在.NET Core应用程序中集成RabbitMQ。 目录 1. 安装RabbitMQ.Client NuGet包 2. 建立连接 3. 定义队列 4. 发…...
嵌入式C++、STM32、MySQL、GPS、InfluxDB和MQTT协议数据可视化:智能物流管理系统设计思路流程(附代码示例)
目录 项目概述 系统设计 硬件设计 软件设计 系统架构图 代码实现 1. STM32微控制器与传感器代码 代码讲解 2. MQTT Broker设置 3. 数据接收与处理 代码讲解 4. 数据存储与分析 5. 数据分析与可视化 代码讲解 6. 数据可视化 项目总结 项目概述 随着电子商务的快…...
.net core docker部署教程和细节问题
在.NET Core中实现Docker一键部署,通常涉及以下几个步骤:编写Dockerfile以定义镜像构建过程、构建Docker镜像、运行Docker容器,以及(可选地)使用自动化工具如Docker Compose或CI/CD工具进行一键部署。以下是一个详细的…...
php数据库链接
Php超全局变量 GET 和 POST 都创建一个数组(例如 array( key1 > value1, key2 > value2, key3 > value3, ...))。此数组包含键/值对,其中 键是表单控件的名称,…...
python+vue3+onlyoffice在线文档系统实战20240726笔记,左侧菜单实现和最近文档基本实现
解决右侧高度过高的问题 解决方案:去掉右侧顶部和底部。 实现左侧菜单 最近文档,纯粹文档 我的文档,既包括文件夹也包括文件 共享文档,别人分享给我的 基本实现代码: 渲染效果: 简单优化 设置默认菜…...
vue中的nexttrick
Vue.js 是一个用于构建用户界面的渐进式框架,它允许开发者通过声明式的数据绑定来构建网页应用。在 Vue 中,nextTick 是一个非常重要的 API,它用于延迟回调的执行,直到下次 DOM 更新循环之后。 为什么使用 nextTick? …...
【BUG】已解决:ModuleNotFoundError: No module named ‘requests‘
ModuleNotFoundError: No module named ‘requests‘ 目录 ModuleNotFoundError: No module named ‘requests‘ 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页,我是博主英杰,211科班出身&a…...
深入理解JS中的发布订阅模式和观察者模式
发布/订阅模式(Publish/Subscribe)和观察者模式(Observer Pattern)在概念上非常相似,都是用于实现对象之间的松耦合通信。尽管它们在实现细节和使用场景上有所不同,但核心思想是相通的。 观察者模式 直接通信:在观察者模式中,观察者(Observer)直接订阅主题(Subject…...
网站IPv6支持率怎么检测?
在当今数字化的时代,IPv6的推广和应用已经成为网络发展的重要趋势。IPv6拥有更大的地址空间、更高的安全性和更好的性能,对于满足日益增长的网络需求至关重要。对于网站所有者和管理员来说,了解其网站对IPv6的支持率是评估网站性能和兼容性的…...
react中简单的配置路由
1.安装react-router-dom npm install react-router-dom 2.新建文件 src下新建page文件夹,该文件夹下新建login和index文件夹用于存放登录页面和首页,再在对应文件夹下分别新建入口文件index.js; src下新建router文件用于存放路由配置文件…...
RocketMQ消息短暂而又精彩的一生(荣耀典藏版)
目录 前言 一、核心概念 二、消息诞生与发送 2.1.路由表 2.2.队列的选择 2.3.其它特殊情况处理 2.3.1.发送异常处理 2.3.2.消息过大的处理 三、消息存储 3.1.如何保证高性能读写 3.1.1.传统IO读写方式 3.2零拷贝 3.2.1.mmap() 3.2.2sendfile() 3.2.3.CommitLog …...
Linux中的文件操作
linux中exec*为加载器,可以将程序加载到内存。 main()函数也是函数,也要被调用,也要被传参 故在一个程序中exec*系列的函数先被执行 程序替换中execve是系统调用,其他的都是封装。 进程程序替换 1.创建子进程的目的࿱…...
[排序]hoare快速排序
今天我们继续来讲排序部分,顾名思义,快速排序是一种特别高效的排序方法,在C语言中qsort函数,底层便是用快排所实现的,快排适用于各个项目中,特别的实用,下面我们就由浅入深的全面刨析快速排序。…...
freertos的学习cubemx版
HAL 库的freertos 1 实时 2 任务->线程 3 移植 CMSIS_V2 V1版本 NVIC配置全部是抢占优先级 第四组 抢占级别有 0-15 编码规则, 变量名 :类型前缀, c - char S - int16_t L - int32_t U - unsigned Uc - uint8_t Us - uint…...
PyQt 信号与槽功能
PyQt 信号与槽功能 基本概念:在 PyQt 中,信号(Signal)与槽(Slot)是一种用于对象之间通信的机制。信号可以由一个对象发出,而槽是用于接收信号并执行相应操作的函数。 信号 信号是在 PyQt 的类…...
navicat premium安装和破解
https://blog.csdn.net/qq1031893936/article/details/90264688 提示信息 - 吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn...
OSI七层模型
OSI(Open System Interconnect),即开放式系统互连。 该体系结构标准定义了网络互连的七层框架(物理层、数据链路层、网络层、传输层、会话层、表示层和应用层 ),即OSI开放系统互连参考模型。 应用层 为用…...
Qt自定义MessageToast
效果: 文字长度自适应,自动居中到parent,会透明渐变消失。 CustomToast::MessageToast(QS("最多添加50张图片"),this);1. CustomToast.h #pragma once#include <QFrame>class CustomToast : public QFrame {Q_OBJECT pub…...
自动化测试 pytest 中 scope 限制 fixture使用范围!
导读 fixture 是 pytest 中一个非常重要的模块,可以让代码更加简洁。 fixture 的 autouse 为 True 可以自动化加载 fixture。 如果不想每条用例执行前都运行初始化方法(可能多个fixture)怎么办?可不可以只运行一次初始化方法? 答…...
软件-vscode-plantUML-drawio
文章目录 vscode基础命令 实操1. vscode实现springboot项目搭建 (包括spring data jpa和sqlLite连接) PlantUMLDrawio基础实操 vscode 基础 命令 启动mysql命令 docker run --name mysql-container -e MYSQL_ROOT_PASSWORD123456 -p 3306:3306 -d my…...
Python爬虫实战案例(爬取图片)
爬取图片的信息 爬取图片与爬取文本内容相似,只是需要加上图片的url,并且在查找图片位置的时候需要带上图片的属性。 这里选取了一个4K高清的壁纸网站(彼岸壁纸https://pic.netbian.com)进行爬取。 具体步骤如下: …...
智慧工地视频汇聚管理平台:打造现代化工程管理的全新视界
一、方案背景 科技高速发展的今天,工地施工已发生翻天覆地的变化,传统工地管理模式很容易造成工地管理混乱、安全事故、数据延迟等问题,人力资源的不足也进一步加剧了监管不到位的局面,严重影响了施工进度质量和安全。 视频监控…...
ASP.NET中的六大对象有哪些?以及各自的功能以及使用方式
在ASP.NET Web Forms中,并没有严格意义上的“六大对象”,但通常我们指的是与HTTP请求和响应处理紧密相关的几个内置对象。以下是这些对象及其功能、使用方式以及简单的实现源码示例: Response对象 功能:用于向客户端发送HTTP响应…...
Elastic 及阿里云 AI 搜索 Tech Day 将于 7 月 27 日在上海举办
活动主题 面向开发者的 AI 搜索相关技术分享,如 RAG、多模态搜索、向量检索等。 活动介绍 参加 Elastic 原厂与阿里云联合举办的 Generative AI 技术交流分享日。借助 The Elastic Search AI Platform, 使用开放且灵活的企业解决方案,以前所…...
基于ssm+vue医院住院管理系统源码数据库
摘 要 随着时代的发展,医疗设备愈来愈完善,医院也变成人们生活中必不可少的场所。如今,已经2021年了,虽然医院的数量和设备愈加完善,但是老龄人口也越来越多。在如此大的人口压力下,医院住院就变成了一个…...
【在排序数组中查找元素的第一个和最后一个位置】python刷题记录
R2-分治 有点easy的感觉,感觉能用哈希表 class Solution:def searchRange(self, nums: List[int], target: int) -> List[int]:nlen(nums)dictdefaultdict(list)#初始赋值哈希表,记录出现次数for num in nums:if not dict[num]:dict[num]1else:dict[…...
Pytorch基础:Tensor的squeeze和unsqueeze方法
相关阅读 Pytorch基础https://blog.csdn.net/weixin_45791458/category_12457644.html?spm1001.2014.3001.5482 在Pytorch中,squeeze和unsqueeze是Tensor的一个重要方法,同时它们也是torch模块中的一个函数,它们的语法如下所示。 Tensor.…...
PHP压缩打包,下载目录或者文件,解压zip文件
函数 /*** 压缩整个文件夹为zip文件* 本地需要绝对路径,服务器需要相对路径*/function makeZipFile($zip_path , $folder_path ) {$rootPath realpath($folder_path);$zip new ZipArchive(); // $zip->open($zip_path, ZipArchive::CREATE | ZipArchi…...
后端面试题日常练-day08 【Java基础】
题目 希望这些选择题能够帮助您进行后端面试的准备,答案在文末 Java中的静态变量和实例变量有何区别? a) 静态变量属于类,实例变量属于对象 b) 静态变量只能在静态方法中访问,实例变量只能在实例方法中访问 c) 静态变量在类加载时…...
Linux:core文件无法生成排查步骤
1、进程的RLIMIT_CORE或RLIMIT_SIZE被设置为0。使用getrlimit和ulimit检查修改。 使用ulimit -a 命令检查是否开启core文件生成限制 如果发现-c后面的结果是0,就临时添加环境变量ulimit -c unlimited,之后在启动程序观察是否有core生成,如果…...
大模型学习资源
上一篇扯了一堆废话,关于大模型,提供一下建议 说实话,大模型更新太快,以我30岁的高龄实在不适合再去研究技术。偶然发现,国内的大模型厂家在做推广的培训。比如上海人工智能实验室,阿里,百度。…...
约定(模拟赛2 T3)
题目描述 小A在你的帮助下成功打开了山洞中的机关,虽然他并没有找到五维空间,但他在山洞中发现了无尽的宝藏,这个消息很快就传了出去。人们为了争夺洞中的宝藏相互陷害,甚至引发了战争,世界都快要毁灭了。小A非常地难…...
Java推送xml数据进行http请求
将json转成xml数据进行推送,打印出最终推送xml的数据格式,再调整代码 直接上代码,详情请看代码注释 public void pushReceipt(JSONObject jsonObj) {try {// 创建 XML 文档Document doc createXmlDocument();// 构建 XML 结构Element rootE…...
Docker安装 OpenResty详细教程
OpenResty 是一个基于 Nginx 的高性能 Web 平台,它集成了 Lua 脚本语言,使得开发者可以在 Nginx 服务器上轻松地进行动态 Web 应用开发。OpenResty 的核心目标是通过将 Nginx 的高性能与 Lua 的灵活性结合起来,提供一个强大且高效的 Web 开发…...
前端位运算运用场景小知识(权限相关)
前提:此篇结合AI、公司实际业务产出,背景是公司有个业务涉及权限,用位运算来控制的,比较新奇,所以记录一下(可能自己比较low) 前端js位运算一般实际的应用场景在哪 ai回答: 整数运算与性能优化ÿ…...
【云原生】Kubernetes中的DaemonSet介绍、原理、用法及实战应用案例分析
✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…...
使用框架构建React Native应用程序的最佳实践
在React Conf上,我们更新了关于开始构建React Native应用程序的最佳工具的指导:一个React Native框架——一个包含所有必要API的工具箱,让您能够构建生产就绪的应用程序。 现在推荐使用React Native框架(如Expo)来创建…...
Godot入门 02玩家1.0版
添加Node2D节点,重命名Game 创建玩家场景,添加CharacterBody2D节点 添加AnimatedSprite2D节点 从精灵表中添加帧 选择文件 设置成8*8 图片边缘模糊改为清晰 设置加载后自动播放,动画循环 。动画速度10FPS,修改动画名称idle。 拖动…...
Docker-Compose配置zookeeper+KaFka+CMAK简单集群
1. 本地DNS解析管理 # 编辑hosts文件 sudo nano /etc/hosts # 添加以下三个主机IP 192.168.186.77 zoo1 k1 192.168.186.18 zoo2 k2 192.168.186.216 zoo3 k3注:zoo1是192.168.186.77的别名,zoo2是192.168.186.18的别名,zoo3是192.168.186.1…...
Python中,集合几种基本运算
在Python中,集合具有几种基本的集合运算,这些运算可以用于处理集合中的数据。以下是Python集合的常见运算,包括并集、交集、差集和对称差集等,并提供代码示例来显示其用法。 并集 (Union) 并集是两个集合中所有唯一元素的结合&a…...
netsuite查询货品库存
//单品可用数量获取var inventorySearch search.create({type: inventoryitem,filters: [[internalid, is, lineItem2.nsSkuId] // 根据 SKU ID 进行筛选],columns: [search.createColumn({name: locationquantityavailable,summary: SUM}) // 获取可用库存总和]});var result…...
Java 实现分页的几种方式详解
目录 分页概述Java实现分页的几种方式 手动分页基于JDBC的分页基于Hibernate的分页基于MyBatis的分页[基于Spring Data JPA的分页](#基于Spring Data JPA的分页)使用PageHelper插件的分页 分页中的注意事项总结 分页概述 分页是指将大量数据分成若干小块,每次只显…...
vite构建vue3项目hmr生效问题踩坑记录
vite构建vue3项目hmr生效问题踩坑记录 hmr的好处 以下是以表格形式呈现的前端开发中HMR(热模块替换)带来的好处: 好处描述提升开发效率允许开发者在不刷新整个页面的情况下实时更新修改的代码,减少等待时间保持应用状态在模块替…...
区块链赋能民生大数据
区块链技术作为一种新兴的信息技术,其在民生大数据领域的应用正逐渐展现出巨大的潜力和价值。以下是对区块链赋能民生大数据的详细阐述: 一、区块链技术概述 区块链是一种去中心化、分布式账本技术,具有数据不可篡改、可追溯、公开透明等特…...