H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vxe-table pro 鼠标单元格区域选取、多重区域选取、复制粘贴、查找替换…等功能

vxe-table pro 鼠标单元格区域选取、多重区域选取、复制粘贴、查找替换…等功能

1.鼠标区域选择功能:

image

参数说明:

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.鼠标多重区域选取、延伸扩大区域

image

参数说明:

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.固定列区域选取

image

<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.复制、剪贴、粘贴

image

参数说明:

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.合并、取消合并

image

参数说明:

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.查找和替换

image

参数说明:

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.更多实用的快捷键

image

参数说明:

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.更多实用的快捷菜单

image
具体参数及使用:vxe-table-plugin-menus

9.集成 echarts 图表渲染

image
具体参数及使用: vxe-table-plugin-charts

未经允许不得转载:H5W3 » vxe-table pro 鼠标单元格区域选取、多重区域选取、复制粘贴、查找替换…等功能

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址