如何使用 vxe-table 来实现高亮行与高亮列,单元格选择高亮移动功能

news/2025/3/24 3:35:57/文章来源:https://www.cnblogs.com/qaz666/p/18785209

如何使用 vxe-table 来实现高亮行与高亮列,单元格选择高亮移动功能

查看官网:https://vxetable.cn
gitbub:https://github.com/x-extends/vxe-table
gitee:https://gitee.com/x-extends/vxe-table

效果

代码

通过 rowConfig.isCurrent 启用高亮行功能,columnConfig.isCurrent 启用高亮列功能,mouseConfig 配置单元格选中功能,keyboardConfig 配置快捷键相关功能

<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script>
export default {data () {const gridOptions = {border: true,showOverflow: true,height: 400,mouseConfig: {selected: true},rowConfig: {isCurrent: true},currentRowConfig: {isFollowSelected: true},columnConfig: {isCurrent: true},currentColumnConfig: {trigger: 'cell',isFollowSelected: true},keyboardConfig: {isArrow: true,isEnter: true,isTab: true,isDel: true},columns: [{ type: 'seq', width: 70 },{ field: 'name', title: 'Name' },{ field: 'sex', title: 'Sex' },{ field: 'age', title: 'Age' }],data: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },{ id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },{ id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'test abc' },{ id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'test abc' },{ id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' },{ id: 10009, name: 'Test9', role: 'Test', sex: 'Man', age: 26, address: 'test abc' },{ id: 10010, name: 'Test10', role: 'Develop', sex: 'Man', age: 38, address: 'test abc' },{ id: 10011, name: 'Test11', role: 'Test', sex: 'Women', age: 29, address: 'test abc' },{ id: 10012, name: 'Test12', role: 'Develop', sex: 'Man', age: 27, address: 'test abc' },{ id: 10013, name: 'Test13', role: 'Test', sex: 'Women', age: 24, address: 'test abc' },{ id: 10014, name: 'Test14', role: 'Develop', sex: 'Man', age: 34, address: 'test abc' },{ id: 10015, name: 'Test15', role: 'Test', sex: 'Man', age: 21, address: 'test abc' },{ id: 10016, name: 'Test16', role: 'Develop', sex: 'Women', age: 20, address: 'test abc' },{ id: 10017, name: 'Test17', role: 'Test', sex: 'Man', age: 31, address: 'test abc' },{ id: 10018, name: 'Test18', role: 'Develop', sex: 'Women', age: 32, address: 'test abc' },{ id: 10019, name: 'Test19', role: 'Test', sex: 'Man', age: 37, address: 'test abc' },{ id: 10020, name: 'Test20', role: 'Develop', sex: 'Man', age: 41, address: 'test abc' }]}return {gridOptions}}
}
</script>

https://gitee.com/x-extends/vxe-table

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

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

相关文章

Browser-use探索-webui

UI化的Browser-use 拉项目下来:git clone https://github.com/browser-use/web-ui.git # 拉取项目依次安装依赖:# pip install browser-use# playwright install# pip install -r requirements.txt 重新搞个配置文件.env:OPENAI_ENDPOINT=https://api.openai.com/v1 OPENAI_…

Web 页面实现图片放大镜效果

Web 页面实现图片放大镜效果Web 页面实现图片放大镜效果 下面是一个完整的示例代码: <!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>图片放大镜效果</title><style>.container {position: relative;width…

3.A+B 问题三

用while(hasNext())来判断是非还有输入 后面用if判断结束循环的条件 break 结束循环; continue 跳过本次循环 进入下一次循环

save actions 设置

activate save actions on save – 在保存的时候激活save actions optimize imports – 自动删除没有引用的importsreformat file – 自动格式化代码add missing @Override – 在save actions激活的时候直接提添加overrideadd a serialVersionUID – 自动添加序列化id

同源策略SpringBoot允许跨域请求配置

完全允许(测试环境) import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotat…

【Vscode】用Vscode配置简约方便的Qt环境!

其实本文是在好不容易配好的情况下写成 故进食后人 Qt Creator的那个页面真的好丑 写完上学期大作业 这学期还要写的时候终于受不了了 而且各种报错什么的非常不好用 不知道是在干嘛 毕竟谁不想用舒服的字体 然后再配上麻衣学姐的背景和看板娘写代码呢?() 于是我开始探索怎么…

17.6K star!后端接口零代码的神器来了,腾讯开源的ORM库太强了!

"🏆 实时零代码、全功能、强安全 ORM 库 🚀 后端接口和文档零代码,前端定制返回 JSON 的数据和结构"嗨,大家好,我是小华同学,关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法"🏆 实时零代码、全功能、强安全 ORM 库 🚀 后端接口和文…

WPF 和 Avalonia 开发者的 html css 前端指南 WrapPanel 篇

本文主要是向大家列出 WPF 和 Avalonia 的 WrapPanel 在 html 和 css 的实现方法。WPF 和 Avalonia 开发者的 html css 前端指南 WrapPanel 篇笔者前端框架使用的是 Vue3 + Deno。 笔者主要会以 Avalonia 作为 C# 技术部分的示例。 本文主要是向大家列出 WPF 和 Avalonia 的 Wr…

os管理文件和open创建文件

目录os基础操作获取当前工作目录更改工作目录列出目录内容创建目录删除目录、文件文件重命名路径拼接与拆分判断路径是否存在递归遍历目录open创建文件读取模式下写入模式下 os基础操作 获取当前工作目录 import os #返回的是一个绝对路径 print(f"当前的工作目录为:{os.…

【VMware VCF】VMware Cloud Foundation 5.2.1.1

如果你尝试访问 KB 52520 并跟踪 VMware Cloud Foundation 发行版本,可能会发现当前最新版本是 VMware Cloud Foundation 5.2.1。如果登录 SDDC Manager UI,导航到生命周期管理->发行版本,从这里查看 VCF 的版本也是同样如此(如下图所示)。但是,如果查看 VMware Cloud…

注意力机制流程图

知识是我们已知的也是我们未知的基于已有的知识之上我们去发现未知的由此,知识得到扩充我们获得的知识越多未知的知识就会更多因而,知识扩充永无止境

26-搭建审计迷你天猫商城python相关知识

1、搭建迷你天猫商城系统并复现log4j2 、fastjson命令执行、sql注入漏洞 搭建迷你天猫商城下载源码配置数据库(5.7.26)将数据库文件导入,,修改 application.properties中 的数据库账号密码 当数据库版本 > 5.7 时会报 GROUP BY 语句的错误,所以还需要修改 MySQL 5.7.26…