vxe-table 区域选取、复制粘贴功能,的基本使用

vxe-table区域选取、复制粘贴功能,的基本使用(注:该功能仅支持企业版,这里仅供部分演示)

1.鼠标区域选择功能:

在这里插入图片描述

参数说明:

mouse-config.area 是否开启鼠标单元格区域选取

<template><div><vxe-table:mouse-config="{area: true}":data="tableData"><vxe-table-column field="a" title="A"></vxe-table-column><vxe-table-column field="b" title="B"></vxe-table-column><vxe-table-column field="c" title="C"></vxe-table-column><vxe-table-column field="d" title="D"></vxe-table-column></vxe-table></div>
</template><script>
export default {data () {return {tableData: [{ a: 'a1', b: 'b1', c: 'c1', d: 'd1' },{ a: 'a2', b: 'b2', c: 'c2', d: 'd2' },{ a: 'a3', b: 'b3', c: 'c3', d: 'd3' },]}}
}
</script>

2.鼠标多重区域选取、延伸扩大区域

在这里插入图片描述

参数说明:

mouse-config.extension 是否开启鼠标点击区域内右下角延伸按钮(注:延伸扩大区域并非复制功能,和 Excel 的行为不一样)

<template><div><vxe-table:mouse-config="{area: true, extension: true}":data="tableData"><vxe-table-column field="a" title="A"></vxe-table-column><vxe-table-column field="b" title="B"></vxe-table-column><vxe-table-column field="c" title="C"></vxe-table-column><vxe-table-column field="d" title="D"></vxe-table-column></vxe-table></div>
</template><script>
export default {data () {return {tableData: [{ a: 'a1', b: 'b1', c: 'c1', d: 'd1' },{ a: 'a2', b: 'b2', c: 'c2', d: 'd2' },{ a: 'a3', b: 'b3', c: 'c3', d: 'd3' },]}}
}
</script>

3.固定列区域选取

在这里插入图片描述

<template><div><vxe-table:mouse-config="{area: true, extension: true}":data="tableData"><vxe-table-column field="a" title="A" fixed="left"></vxe-table-column><vxe-table-column field="b" title="B"></vxe-table-column><vxe-table-column field="c" title="C"></vxe-table-column><vxe-table-column field="d" title="D" fixed="right"></vxe-table-column></vxe-table></div>
</template><script>
export default {data () {return {tableData: [{ a: 'a1', b: 'b1', c: 'c1', d: 'd1' },{ a: 'a2', b: 'b2', c: 'c2', d: 'd2' },{ a: 'a3', b: 'b3', c: 'c3', d: 'd3' },]}}
}
</script>

4.复制、剪贴、粘贴

在这里插入图片描述

参数说明:

keyboard-config.isClip 是否开启(Ctrl+X键、Ctrl+C键、Ctrl+V键)复制粘贴功能

<template><div><vxe-grid:mouse-config="{area: true, extension: true}":keyboard-config="{isClip: true}":columns="tableColumn":data="tableData"></vxe-grid></div>
</template><script>
export default {data () {return {tableColumn: [{ field: 'a', title: 'A' },{ field: 'b', title: 'B' },{ field: 'c', title: 'C' },{ field: 'd', title: 'D' }],tableData: [{ a: 'a1', b: 'b1', c: 'c1', d: 'd1' },{ a: 'a2', b: 'b2', c: 'c2', d: 'd2' },{ a: 'a3', b: 'b3', c: 'c3', d: 'd3' },]}}
}
</script>

5.合并、取消合并

在这里插入图片描述

参数说明:

keyboard-config.isMerge 是否开开启(Ctrl+M键)合并和取消合并功能

<template><div><vxe-grid:mouse-config="{area: true, extension: true}":keyboard-config="{isMerge: true}":columns="tableColumn":data="tableData"></vxe-grid></div>
</template><script>
export default {data () {return {tableColumn: [{ field: 'a', title: 'A' },{ field: 'b', title: 'B' },{ field: 'c', title: 'C' },{ field: 'd', title: 'D' }],tableData: [{ a: 'a1', b: 'b1', c: 'c1', d: 'd1' },{ a: 'a2', b: 'b2', c: 'c2', d: 'd2' },{ a: 'a3', b: 'b3', c: 'c3', d: 'd3' },]}}
}
</script>

6.查找和替换

在这里插入图片描述

参数说明:

keyboard-config.isFNR 是否开启(Ctrl+F键、Ctrl+H键)查找和替换功能

<template><div><vxe-grid:mouse-config="{area: true, extension: true}":keyboard-config="{isFNR: true}":columns="tableColumn":data="tableData"></vxe-grid></div>
</template><script>
export default {data () {return {tableColumn: [{ field: 'a', title: 'A' },{ field: 'b', title: 'B' },{ field: 'c', title: 'C' },{ field: 'd', title: 'D' }],tableData: [{ a: 'a1', b: 'b1', c: 'c1', d: 'd1' },{ a: 'a2', b: 'b2', c: 'c2', d: 'd2' },{ a: 'a3', b: 'b3', c: 'c3', d: 'd3' },]}}
}
</script>

7.更多实用的快捷键

在这里插入图片描述

参数说明:

keyboard-config.isEdit 是否开启(Esc键、F2键、任意键)单元格编辑功能
keyboard-config.isTab 是否开启(Tab键、Shift+Tab键)单元格左右移动功能
keyboard-config.isArrow 是否开启(方向键)单元格上下左右移动功能
keyboard-config.isEnter 是否开启(Enter键、Shift+Enter键)单元格上下移动功能
keyboard-config.isDel 是否开启(Delete键、Backspace键)清空单元格的值
keyboard-config.isChecked 是否开启(Spacebar键)切换复选框和单选框状态
keyboard-config.enterToTab 是否将回车键行为改成 Tab 键行为

  • 鼠标:
    • (Mouse + Left )鼠标选取指定范围的单元格
    • (Mouse + Right )鼠标选取选中位置的单元格
    • (Mouse + Left + Ctrl)鼠标选取多区域的单元格
    • (Mouse + Left)鼠标左键按住区域内右下角延伸按钮,将区域横向或纵向扩大
  • 键盘:
    • (Ctrl + X)将单元格标记为剪贴状态并将内容复制到剪贴板,支持 Excel 和 WPS
    • (Ctrl + C)将单元格标记为复制状态并将内容复制到剪贴板,支持 Excel 和 WPS
    • (Ctrl + V)将剪贴板的内容粘贴到指定区域中,支持 Excel 和 WPS
    • (Ctrl + M)将选取的单元格合并或取消合并
    • (Ctrl + F)查找单元格数据,全表或查找指定区域单元格数据
    • (Ctrl + H)替换单元格数据,全表或替换指定区域单元格数据
    • (Arrow Up ↑)如果存在,则移动到上面的单元格
    • (Arrow Down ↓)如果存在,则移动到下面的单元格
    • (Arrow Left ←)如果存在,则移动到左边的单元格
    • (Arrow Right →)如果存在,则移动到右边的单元格
    • (Tab)如果存在,则移动到右边单元格;如果存在区域,则在指定区域内移动;如果移动到最后一列,则从下一行开始移到,以此循环
    • (Shift + Tab)如果存在,则移动到左边单元格,则在指定区域内移动;如果移动到第一列,则从上一行开始移到,以此循环
    • (Spacebar)如果选取的区域存在复选框,则切换勾选状态
    • (Enter)如果存在,取消单元格编辑并移动到下面的单元格,则在指定区域内移动;如果移动到最后一行,则从下一列开始移到,以此循环
    • (Shift + Enter)如果存在,取消单元格编辑并移动到上面的单元格,则在指定区域内移动;如果移动到第一行,则从上一列开始移到,以此循环
    • (Delete)清空单元格内容
    • (Backspace)清空单元格内容并激活为编辑状态
    • (F2)如果存在,激活单元格为编辑状态
    • (Esc)如果存在,取消单元格编辑状态
    • (*)按下除功能键之外的任意键激活覆盖式单元格编辑
<template><div><vxe-grid:mouse-config="{area: true, extension: true}":keyboard-config="{isClip: true, isEdit: true, isTab: true, isArrow: true, isEnter: true, isDel: true, isMerge: true, isFNR: true, isChecked: true, enterToTab: false}":columns="tableColumn":data="tableData"></vxe-grid></div>
</template><script>
export default {data () {return {tableColumn: [{ field: 'a', title: 'A' },{ field: 'b', title: 'B' },{ field: 'c', title: 'C' },{ field: 'd', title: 'D' }],tableData: [{ a: 'a1', b: 'b1', c: 'c1', d: 'd1' },{ a: 'a2', b: 'b2', c: 'c2', d: 'd2' },{ a: 'a3', b: 'b3', c: 'c3', d: 'd3' },]}}
}
</script>

8.更多实用的快捷菜单

在这里插入图片描述
具体参数及使用:vxe-table-plugin-menus

9.集成 echarts 图表渲染

在这里插入图片描述
具体参数及使用: vxe-table-plugin-charts

10.支持区域选取、虚拟滚动、虚拟合并同时使用

在这里插入图片描述
(注:pro 版本并非开源项目,这里仅供部分演示)

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

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

相关文章

基于深度学习的MVS学习笔记(05.04-05.07)

1. MVS方法与分类 1.1 问题界定&#xff1a;多目和单目双目 单目深度估计&#xff1a;拟合一个函数将图像【RGB输入】映射到深度图【浮点输出】双目深度估计&#xff1a;双目回归视差&#xff0c;可以进一步求像素距离相机光心的深度多视点三维重建 单目只能找到“相对的”相…

详解基于 RAG 的 txt2sql 全过程

前文 本文使用通义千问大模型和 ChromaDB 向量数据库来实现一个完整的 text2sql 的项目&#xff0c;并基于实际的业务进行效果的展示。 准备 在进行项目之前需要准备下面主要的内容&#xff1a; python 环境通义千问 qwen-max 模型的 api-keyChromaDB 向量数据库acge_text_…

Linux-笔记 uboot修改设备树

1. FDT介绍 扁平设备树&#xff08;Flattened Device Tree&#xff0c;FDT&#xff09;&#xff0c;也叫平坦设备树&#xff0c;是设备树的一种二进制表示形式&#xff0c;提高了在嵌入式系统中的传输和解析效率&#xff1b; 2. 在U-Boot中使用FDT 2.1. 进入U-Boot 开发板上…

OpenCV 入门(四)—— 车牌号识别

OpenCV 入门系列&#xff1a; OpenCV 入门&#xff08;一&#xff09;—— OpenCV 基础 OpenCV 入门&#xff08;二&#xff09;—— 车牌定位 OpenCV 入门&#xff08;三&#xff09;—— 车牌筛选 OpenCV 入门&#xff08;四&#xff09;—— 车牌号识别 OpenCV 入门&#xf…

【论文阅读】VMamba: Visual State Space Model

VMamba:视觉状态空间模型 code&#xff1a;https://github.com/MzeroMiko/VMamba Background ​ CNN拥有线性复杂度因而可以处理高分辨率的图像&#xff0c;而ViT在拟合能力方面超过了CNN&#xff0c;但ViT是二次复杂度&#xff0c;在处理高分辨率图像时计算开销较大。ViT通过…

Wappalyzer指纹识别下载安装使用教程,图文教程(超详细)

「作者简介」&#xff1a;2022年北京冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础对安全知识体系进行总结与归纳&#xff0c;著作适用于快速入门的 《网络安全自学教程》&#xff0c;内容涵盖系统安全、信息收集等…

Windows平台通过MobaXterm远程登录安装在VMware上的Linux系统(CentOS)

MobaXterm是一个功能强大的远程计算工具&#xff0c;它提供了一个综合的远程终端和图形化的X11服务器。MobaXterm旨在简化远程计算任务&#xff0c;提供了许多有用的功能&#xff0c;使远程访问和管理远程服务器变得更加方便&#xff0c;它提供了一个强大的终端模拟器&#xff…

C语言进程A调用进程B中定义的函数

我想要实现2个独立的进程&#xff0c;A持续运行&#xff0c;B随时运行&#xff0c;B的函数通过A中得条件触发。 因为B中的函数触发后&#xff0c;还会执行B中的其他相关函数&#xff0c;所以单独的把B的触发函数写成动态链接库在A中调用是不行的。B是一个独立的逻辑&#xff0…

钉钉开放平台创建企业内部H5微应用或者小程序

前言&#xff1a; 在当今企业数字化转型的浪潮中&#xff0c;创建企业内部H5微应用或小程序已成为提升工作效率和促进内部沟通的重要举措。发话不多说本文将介绍如何利用钉钉平台快速创建这些应用&#xff0c;让企业内部的工作更加便捷高效。 步骤 1.在浏览器打开链接…

【解决】Android APK文件安装时 已包含数字签名相同APP问题

引言 在开发Android程序过程中&#xff0c;编译好的APK文件&#xff0c;安装至Android手机时&#xff0c;有时会报 包含数字签名相同的APP 然后无法安装的问题&#xff0c;这可能是之前安装过同签名的APP&#xff0c;但是如果不知道哪个是&#xff0c;无法有效卸载&#xff0c;…

ESD静电问题 | 更换接口芯片

【转发微信公众号&#xff1a;EMC容冠电磁】

VMare Workstation安装ubuntu虚拟机异常问题处理

安装方法 ubuntu官网下载插件 异常处理 开启时报错"unable to proceed without a log file" 遇到此问题的都有一个共同点&#xff0c;工作目录路径上都带了数字&#xff0c;比如"Ubuntu 64位 01"&#xff0c;解决方法为&#xff1a; 选中"Ubuntu 64位…

用得助全媒体呼叫中心,让AI落到实处帮品牌做营销

怎么让人工智能落到实处的帮助到我们&#xff1f;我们今天来讲讲中关村科金得助全媒体呼叫中心是怎么让AI帮品牌。 这次聊的案例是知名的护肤品牌&#xff0c;该品牌在中国功能性护肤品市场占有率达到20.5%&#xff0c;这么高的市场占有率客户的咨询量也是非常庞大的&#xff0…

C++ 继承篇

面向对象语言的三大特性&#xff1a;封装&#xff0c;继承和多态 根据目前学到的知识&#xff0c;对于封装的理解&#xff0c;大致有两层&#xff1a; 将数据和方法封装&#xff0c;不想让外面看到用private/protected修饰&#xff0c;想让外面看到用public修饰类型的行为不满…

elasticsearch文档读写原理大致分析一下

文档写简介 客户端通过hash选择一个node发送请求&#xff0c;专业术语叫做协调节点 协调节点会对document进行路由&#xff0c;将请求转发给对应的primary shard primary shard在处理完数据后&#xff0c;会将document 同步到所有replica shard 协调节点将处理结果返回给…

[嵌入式系统-71]:RT-Thread-组件:日志管理系统ulog,让运行过程可追溯

目录 ulog 日志 1. ulog 简介 ulog 架构 配置选项 日志级别 日志标签 2. 日志初始化 初始化 去初始化 3. 日志输出 API 4. 日志使用示例 使用示例 在中断 ISR 中使用 同步模式&#xff08;Synchronous Mode&#xff09; 异步模式&#xff08;Asynchronous Mode&…

【视频/图像数据格式】基本视频/图像数据格式

基本视频/图像数据格式 1.概述2.视频图像数据格式2.1 yuv420p2.2 yuv422p2.3 yuv444p2.4 RGB格式2.5 BMP格式 3.格式转换3.1 RGB24转换为YUV420P 4.视频图像评价指标4.1 MSE4.2 PSNR 参考&#xff1a; 雷霄骅博士博客&#xff1a; http://t.csdnimg.cn/kl2jLhttp://t.csdnimg.…

蓝桥杯EDA客观题

目录 前言 一、PCB类知识点和题目分析 1.电阻 2.电容 3.封装类 4.单位转换类 5.电路板结构类 6.PCB绘制规则 7.立创软件 8.PCB硬件 线性电源和开关电源 二、数电知识点和题目分析 1.门电路 2.逻辑代数 3.组合逻辑电路 4.触发器 5.时序逻辑电路 6.其他 三、模…

vue3+ts之el-tooltip换行显示内容

<el-tooltip placement"top-end"><div slot"content" class"tips"><el-button type"primary" click"exportData">导出</el-button></div><template #content><span class"cont…

【项目实战】使用Yolov8 + tesseract 实现身份证信息解析(OCR) + 输入可为图片或者pdf + 完整代码 + 整体方案 + 全网首发

本项目可用于实验,毕业设计参考等。整体效果如下所示: 说明:图片来源于网络,如有侵权,请联系作者删除。 目录 一 数据集制作