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

news2024/11/28 7:31:50

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-table
      border
      ref="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: string
  role: string
  sex: string
  age: number
  content: 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.value
  if ($table) {
    $table.setCurrentRow(tableData.value[1])
  }
}

const clearSelectEvent = () => {
  const $table = tableRef.value
  if ($table) {
    $table.clearCurrentRow()
  }
}

const getCurrentEvent = () => {
  const $table = tableRef.value
  if ($table) {
    VXETable.modal.alert(JSON.stringify($table.getCurrentRecord()))
  }
}
</script>

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

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

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

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

相关文章

大模型算法面试题(十二)

本系列收纳各种大模型面试题及答案。 1、领域模型Continue PreTrain数据如何选取 在领域模型的Continue PreTrain&#xff08;持续预训练&#xff09;过程中&#xff0c;数据选取是一个至关重要的步骤&#xff0c;它直接影响模型在特定领域上的性能和泛化能力。以下是一些关于…

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

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

京东发行稳定币的背后

加密市场很热&#xff0c;京东也要来分一杯羹&#xff1f; 7月24日&#xff0c;据财联社报道&#xff0c;京东科技旗下的京东币链科技 ( 香港 ) 将在香港发行与港元 1:1锚定的加密货币稳定币&#xff0c;在市场上掀起广泛热议。 由于众所周知的监管原因&#xff0c;国内大厂在早…

Window下CLion实现本机通过socket通信-C++

1.引言-什么是socket socket即套接字&#xff0c;用于描述地址和端口&#xff0c;是一个通信链的句柄。应用程序通过socket向网络发出请求或者回应。 sockets(套接字)编程有三种&#xff0c;流式套接字&#xff08;SOCK_STREAM&#xff09;&#xff0c;数据报套接字&#xff…

Ubuntu18.04.6 LTS安装opencv3.3.0(详细步骤教程)

本章教程在Ubuntu18.04.6LTS上安装opencv3.3.0版本,亲测已安装成功。 一、下载opencv安装包 1、下载 wget https://github.com/opencv/opencv/archive/3.3.0.zip2、解压 unzip opencv-3.3.0.zip如果没有unzip命令,需要先安装一下 apt install unzip

2024第八届自然语言处理与信息检索国际会议 (NLPIR 2024)即将召开!

2024第八届自然语言处理与信息检索国际会议 (NLPIR 2024)将于2024年12月13-15日在日本冈山的冈山大学举行。NLPIR 2024将为自然语言处理与信息检索领域的专家学者提供一个交流与合作的平台&#xff0c;推动该领域的学术进步和技术创新。同时&#xff0c;本次会议也将为相关企业…

Spring -- 使用XML开发MyBatis

T04BF &#x1f44b;专栏: 算法|JAVA|MySQL|C语言 &#x1faf5; 今天你敲代码了吗 文章目录 MyBatis XML配置文件开发配置连接字符串和MyBatis写Mapper层代码添加mapper接口添加UserInfoXmLMapper.xml 操作数据库INSERTDELETE & UPDATE MyBatis XML配置文件开发 实际上,除…

JAVA基础 - 枚举类

目录 一. 简介 二. 声明 属性 方法 三. 常用方法 四. 使用技巧 五. 使用情景 六. 总结 一. 简介 在 Java 中&#xff0c;枚举类&#xff08;Enum Class&#xff09;是一种特殊的类&#xff0c;用于定义一组有限的、预定义的常量值。 枚举类的主要特点和优势包括&#x…

Cyberchef基础概念之-循环语句操作-Jump/Label

在本专栏的前面的文章介绍了fork,merge,subsection,register等多种概念来解决实际场景的问题。本文将介绍的Jump/Label的操作类似于编程语言中的for和while的功能&#xff0c;相信在学会使用jump操作后&#xff0c;将有助于解决更为复杂的数据处理问题。 本文将详细的介绍该操…

Linux冯诺依曼体系、操作系统、进程概念、进程状态、进程切换

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;Linux 目录 一、冯诺依曼体系结构 二、操作系统 1、概念 2、为什么要有操作系统&#xff1f; 3、理解操作系统 1.管理的本质 2.管理的概念 3.操作系统结构图 4.为什么要有操作系统&#xff1f; 三…

【计算机网络】ICMP报文实验

一&#xff1a;实验目的 1&#xff1a;掌握ICMP报文的各种类型及其代码。 2&#xff1a;掌握ICMP报文的格式。 3&#xff1a;深入理解TTL的含义&#xff08;Time to Live&#xff0c;生存时间&#xff09;。 二&#xff1a;实验仪器设备及软件 硬件&#xff1a;RCMS-C服务器…

ocrbench:on the hidden mystery of ocr in large multimodel models

【多模态】29、OCRBench | 为大型多模态模型提供一个 OCR 任务测评基准-CSDN博客文章浏览阅读1.9k次,点赞26次,收藏22次。本文主要介绍 OCRBench_ocrbenchhttps://blog.csdn.net/jiaoyangwm/article/details/138414709OpenCompass司南 - 评测榜单评测榜单旨在为大语言模型和多…

LINUX 孤儿进程和僵尸进程

1、孤儿进 一个父进程退出&#xff0c;而它的一个或多个子进程还在运行&#xff0c;那么那些子进程将成为孤儿进程。孤儿进程将被init进程(进程号为1)所收养&#xff0c;并由init进程对它们完成状态收集工作 为了释放子进程的占用的系统资源&#xff1a; 进程结束之后&#xf…

CAPL通过回调函数applILTxPending模拟E2E失败

文章目录 问题解决办法之前的文章 CANoe CAPL通过回调函数applILTxPending实现E2E模拟发送 问题 问题:在使用CANoeIL仿真模拟E2E报文时,在一台电脑可以仿真成功,同样的工程复制到另外一台电脑就不行了,E2E不计算,这是因为什么? 两台机柜用的都是15版本,模拟失败的是从…

C++ //练习 15.30 编写你自己的Basket类,用它计算上一个练习中交易记录的总价格。

C Primer&#xff08;第5版&#xff09; 练习 15.30 练习 15.30 编写你自己的Basket类&#xff0c;用它计算上一个练习中交易记录的总价格。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块&#xff1a; /********************…

昇思25天学习打卡营第24天|基于MindSpore的红酒分类实验

相关知识 KNN k临近算法K nearest neighbor&#xff0c;用于分类和回归。主要思想为&#xff0c;训练一个样本和所有训练样本之间的举例&#xff0c;找到和这个样本最接近的k个样本&#xff0c;根据这k个样本的类别进行投票&#xff0c;票数最高的类就是分类的结果。模型效果…

全网最最实用--模型高效推理:量化基础

文章目录 一、量化基础--计算机中数的表示1. 原码&#xff08;Sign-Magnitude&#xff09;2. 反码&#xff08;Ones Complement&#xff09;3. 补码&#xff08;Twos Complement&#xff09;4. 浮点数&#xff08;Floating Point&#xff09;a.常用的浮点数标准--IEEE 754(FP32…

力扣 459重复的子字符串

思路&#xff1a; KMP算法的核心是求next数组 next数组代表的是当前字符串最大前后缀的长度 而求重复的子字符串就是求字符串的最大前缀与最大后缀之间的子字符串 如果这个子字符串是字符串长度的约数&#xff0c;则true /** lc appleetcode.cn id459 langcpp** [459] 重复…

LangChain 一 hello LLM

本来想先写LangChain系列的&#xff0c;但是最近被AutoGen、LlamaIndex给吸引了。2023就要过去了&#xff0c;TIOBE数据编程语言排名Python都第一了&#xff0c;可见今年AI开发之热。好吧&#xff0c;一边学习业界通用的LangChain框架&#xff0c;一边准备跨年吧。 前言 先是O…

基于FPGA的YOLOV5s神经网络硬件部署

一 YOLOV5s 本设计以YOLOV5s部署于FPGA上为例进行分析概述。YOLOV5s网络主要包括backbone、neck、head三部分。 涉及的关键算子&#xff1a; Conv&#xff1a;卷积&#xff0c;包括3*3、1*1&#xff0c;stride1/2Concat&#xff1a;Upsample:Pooling&#xff1a;ADD 二 评估 …