我要评论vxe-table 实现 excel 选择一个单元格，拖拽自动复制新的单元格
鼠标按住右下角扩展按钮，当选取一个单元格时，自动将当前内容填充到扩展区域的所有单元格中
<template>
<div>
<vxe-grid v-bind="gridoptions"></vxe-grid>
</div>
</template>
<script>
export default {
data () {
const gridoptions = {
border: true,
height: 500,
showoverflow: true,
columnconfig: {
resizable: true
},
editconfig: {
mode: 'cell',
trigger: 'dblclick' // 双击单元格激活编辑状态
},
mouseconfig: {
area: true,
extension: true // 是否开启区域扩展选取功能，开启后可以通过鼠标左键按住区域内右下角扩展按钮，将区域横向或纵向扩大
},
areaconfig: {
extendbycopy: true // 是否启用扩展区域自动填充，当选取一个单元格时，自动将当前内容填充到扩展区域的所有单元格中（同时按住 ctrl 键可取消值自动识别数字功能）
},
keyboardconfig: {
arrowcursorlock: true,
isclip: true,
isarrow: true,
isshift: true,
istab: true,
isenter: true,
isedit: true,
isdel: true,
isesc: true,
isfnr: true // 是否开启查找与替换
},
columns: [
{ type: 'seq', width: 60 },
{ field: 'a', title: 'a', editrender: { name: 'input' } },
{ field: 'b', title: 'b', editrender: { name: 'input' } },
{ field: 'c', title: 'c', editrender: { name: 'input' } },
{ field: 'd', title: 'd', editrender: { name: 'input' } },
{ field: 'e', title: 'e', editrender: { name: 'input' } },
{ field: 'f', title: 'f', editrender: { name: 'input' } },
{ field: 'g', title: 'g', editrender: { name: 'input' } },
{ field: 'h', title: 'h', editrender: { name: 'input' } }
],
data: [
{ id: 10001, a: 'test1', b: 'develop', c: 'man', d: '23', e: '28', f: '', g: '', h: '' },
{ id: 10002, a: 'test2', b: 'test', c: 'women', d: '23', e: '22', f: '', g: '', h: '' },
{ id: 10003, a: 'test3', b: 'pm', c: 'man', d: '23', e: '32', f: '', g: '', h: '' },
{ id: 10004, a: 'test4', b: 'designer', c: 'women', d: '456', e: '24', f: '', g: '', h: '' },
{ id: 10005, a: 'test5', b: 'designer', c: 'women', d: '23', e: '42', f: '', g: '', h: '' },
{ id: 10006, a: 'test6', b: 'designer', c: 'man', d: '23', e: '38', f: '', g: '', h: '' },
{ id: 10007, a: 'test7', b: 'test', c: 'women', d: '100', e: '24', f: '', g: '', h: '' },
{ id: 10008, a: 'test8', b: 'pm', c: 'man', d: '345', e: '34', f: '', g: '', h: '' },
{ id: 10009, a: 'test9', b: 'designer', c: 'man', d: '67', e: '52', f: '', g: '', h: '' },
{ id: 10010, a: 'test10', b: 'test', c: 'women', d: '23', e: '44', f: '', g: '', h: '' }
]
}
return {
gridoptions
}
}
}
</script>https://gitee.com/x-extends/vxe-table
到此这篇关于vxe-table 实现 excel 选择一个单元格，拖拽自动复制新的单元格的文章就介绍到这了,更多相关vxe-table 拖拽复制单元格内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论