vxe-table 实现行高拖拽功能,需要注意更新到最新版本才支持该功能

通过 row-config.resizable 和 row-resize 启用行高拖拽功能;
当需要多列允许触发行高拖拽时,通过 row-resize 指定任意列
<template>
<div>
<vxe-grid v-bind="gridoptions"></vxe-grid>
</div>
</template>
<script>
export default {
data () {
const gridoptions = {
border: true,
rowconfig: {
resizable: true
},
columns: [
{ type: 'seq', width: 70, rowresize: true },
{ field: 'name', title: 'name' },
{ field: 'sex', title: 'sex' },
{ field: 'age', title: 'age' },
{ field: 'time', title: 'time' },
{ field: 'address', title: 'address' }
],
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: 24, address: 'shanghai' }
]
}
return {
gridoptions
}
}
}
</script>https://gitee.com/x-extends/vxe-table
到此这篇关于vxe-table 实现行高拖拽功能示例详解的文章就介绍到这了,更多相关vxe-table 行高拖拽内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!
发表评论