Vue.js
vxe-table pro 的基本使用__Vue.js
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利
vxe-table pro 的基本使用（注：pro 版本并非开源项目，仅供部分预览）
功能强大的开源版本看这里：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-column field="e" title="E"></vxe-table-column>
<vxe-table-column field="f" title="F"></vxe-table-column>
<vxe-table-column field="g" title="G"></vxe-table-column>
</vxe-table>
</div>
</template>
<script>
export default {
data () {
return {
tableData: [
{ a: 'a1', b: 'b1', c: 'c1', d: 'd1', e: 'e1', f: 'f1', g: 'g1' },
{ a: 'a2', b: 'b2', c: 'c2', d: 'd2', e: 'e2', f: 'f2', g: 'g2' },
{ a: 'a3', b: 'b3', c: 'c3', d: 'd3', e: 'e3', f: 'f3', g: 'g3' }
]
}
}
}
</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-column field="e" title="E"></vxe-table-column>
<vxe-table-column field="f" title="F"></vxe-table-column>
<vxe-table-column field="g" title="G"></vxe-table-column>
</vxe-table>
</div>
</template>
<script>
export default {
data () {
return {
tableData: [
{ a: 'a1', b: 'b1', c: 'c1', d: 'd1', e: 'e1', f: 'f1', g: 'g1' },
{ a: 'a2', b: 'b2', c: 'c2', d: 'd2', e: 'e2', f: 'f2', g: 'g2' },
{ a: 'a3', b: 'b3', c: 'c3', d: 'd3', e: 'e3', f: 'f3', g: 'g3' }
]
}
}
}
</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"></vxe-table-column>
<vxe-table-column field="e" title="E"></vxe-table-column>
<vxe-table-column field="f" title="F"></vxe-table-column>
<vxe-table-column field="g" title="G" fixed="right"></vxe-table-column>
</vxe-table>
</div>
</template>
<script>
export default {
data () {
return {
tableData: [
{ a: 'a1', b: 'b1', c: 'c1', d: 'd1', e: 'e1', f: 'f1', g: 'g1' },
{ a: 'a2', b: 'b2', c: 'c2', d: 'd2', e: 'e2', f: 'f2', g: 'g2' },
{ a: 'a3', b: 'b3', c: 'c3', d: 'd3', e: 'e3', f: 'f3', g: 'g3' }
]
}
}
}
</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' },
{ field: 'e', title: 'E' },
{ field: 'f', title: 'F' },
{ field: 'g', title: 'G' }
],
tableData: [
{ a: 'a1', b: 'b1', c: 'c1', d: 'd1', e: 'e1', f: 'f1', g: 'g1' },
{ a: 'a2', b: 'b2', c: 'c2', d: 'd2', e: 'e2', f: 'f2', g: 'g2' },
{ a: 'a3', b: 'b3', c: 'c3', d: 'd3', e: 'e3', f: 'f3', g: 'g3' }
]
}
}
}
</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' },
{ field: 'e', title: 'E' },
{ field: 'f', title: 'F' },
{ field: 'g', title: 'G' }
],
tableData: [
{ a: 'a1', b: 'b1', c: 'c1', d: 'd1', e: 'e1', f: 'f1', g: 'g1' },
{ a: 'a2', b: 'b2', c: 'c2', d: 'd2', e: 'e2', f: 'f2', g: 'g2' },
{ a: 'a3', b: 'b3', c: 'c3', d: 'd3', e: 'e3', f: 'f3', g: 'g3' }
]
}
}
}
</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' },
{ field: 'e', title: 'E' },
{ field: 'f', title: 'F' },
{ field: 'g', title: 'G' }
],
tableData: [
{ a: 'a1', b: 'b1', c: 'c1', d: 'd1', e: 'e1', f: 'f1', g: 'g1' },
{ a: 'a2', b: 'b2', c: 'c2', d: 'd2', e: 'e2', f: 'f2', g: 'g2' },
{ a: 'a3', b: 'b3', c: 'c3', d: 'd3', e: 'e3', f: 'f3', g: 'g3' }
]
}
}
}
</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' },
{ field: 'e', title: 'E' },
{ field: 'f', title: 'F' },
{ field: 'g', title: 'G' }
],
tableData: [
{ a: 'a1', b: 'b1', c: 'c1', d: 'd1', e: 'e1', f: 'f1', g: 'g1' },
{ a: 'a2', b: 'b2', c: 'c2', d: 'd2', e: 'e2', f: 'f2', g: 'g2' },
{ a: 'a3', b: 'b3', c: 'c3', d: 'd3', e: 'e3', f: 'f3', g: 'g3' }
]
}
}
}
</script>
8.更多实用的快捷菜单
具体参数及使用：vxe-table-plugin-menus
9.集成 echarts 图表渲染
具体参数及使用： vxe-table-plugin-charts
10.支持区域选取、虚拟滚动、虚拟合并同时使用
（注：pro 版本并非开源项目，仅供部分预览）
版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 作者: 大猩猩X 原文链接：https://juejin.im/post/6871423471226880013
