当前位置: 首页 > news >正文

如果使用 vxe-table 实现全键盘操作,按键切换复选框单选框的选中状态

如果使用 vxe-table 实现全键盘操作,按键切换复选框单选框的选中状态,当遇到特点需求,比如需要通过按键来选中复选框或单选框时,该功能就非常有用了。

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

效果

table_keyboard_selection

代码

通过设置 keyboard-config.isChecked 启用复选框/单选框切换选中状态,启用后当移动选中的单元格如果为复选框或单选框,则按空格键就可以切换选中状态

<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script setup>
import { reactive } from 'vue'const gridOptions = reactive({border: true,showOverflow: true,height: 500,mouseConfig: {selected: true},keyboardConfig: {isArrow: true,isEnter: true,isTab: true,isChecked: true},columns: [{ type: 'seq', width: 70 },{ type: 'radio', width: 70 },{ type: 'checkbox', 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' }]
})
</script>

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

http://www.zskr.cn/news/26582.html

相关文章:

  • 2025年上海装修公司电话推荐:极家与俞润本土双选参考
  • 2025年激光切割机厂家电话推荐:济南邦德激光4009917771技术对接通道.
  • 各项任务完成时间统计
  • 【往届已检索!稳定检索】2025年第二届人工智能、数字媒体技术与交互设计国际学术会议(ICADI 2025)
  • 2025 年螺旋地桩源头厂家最新推荐排行榜:聚焦热镀锌光伏大棚等领域,精选优质企业保障供应与品质光伏/大棚/预埋/ 定做/钢管螺旋地桩厂家推荐
  • 交互题
  • 尝试理解FunctionalInterface
  • 2025 年防淹门源头厂家最新推荐排行榜权威发布,含地铁 / 防洪 / 地下通道专用款,15 项专利 + 央视报道品牌领衔
  • 一文带你掌握Visual Studio中集成的git功能
  • iOS 混淆实战 多工具组合完成 IPA 混淆、加固与工程化落地(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
  • 构筑平安工地新防线:国标GB28181算法算力平台EasyGBS的平安工地解决方案
  • 服务器运维(一)linux进程指令大全——东方仙盟筑基期 - 指南
  • 设置某些网站不走代理
  • 2025年粘度计厂家权威推荐榜:在线旋转振动/实验室反应釜管线在线粘度计,专业选型指南与技术创新深度解析
  • 2025 年试验箱厂家最新推荐排行榜:涵盖高低温 / 恒温恒湿 / 冷热冲击等设备,精选实力厂商助力企业选购
  • 一键解锁!Air8000 Wi-Fi助物联网设备秒变文件服务器
  • C语言中unsigned
  • 解码Linux文件IO之触摸屏原理及应用
  • 2025年精密球轴承厂家权威推荐榜:半导体设备/加工中心/机床主轴/直联主轴/电主轴/定制/国产高端/不锈钢/陶瓷/耐腐蚀/超高真空/真空泵/晶圆搬运机械手臂/进口替代/国产半导体/低温泵轴承精选
  • 腾讯TCCL和阿里ACCL对比
  • BOS中多选基础资料字段设置默认值
  • DeepSeek-MOE原理讲解
  • npm---查看镜像和更换镜像
  • 在一台机器上搭建一体化 Ceph 存储集群
  • Windows下利用 Python OCR 识别电子发票(增值税专用发票)(使用 GhostScript 和 Tesseract )
  • 2025年臭氧检测仪厂家权威推荐榜:在线式/固定式/便携式/手持式/工业臭氧检测仪专业选购指南
  • ✨WPF编程基础【2.2】:布局面板实战 - 详解
  • 2025年不锈钢酸洗钝化液厂家推荐排行榜:环保型不锈钢清洗钝化液,不锈钢管酸洗钝化处理,不锈钢清洗剂专业选购指南
  • 达梦8加密函数是什么怎么调用,达梦数据库加密算法
  • Pandas -