vxe-table 实现行高拖拽功能示例详解
更新时间:2025年01月21日 09:28:59 作者:可不简单
vxe-table实现行高拖拽功能,需更新到最新版本,通过row-config.resizable和row-resize启用,多列允许触发行高拖拽时,通过row-resize指定任意列,感兴趣的朋友跟随小编一起看看吧
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 行高拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue.js中自定义Markdown插件实现References解析(推荐)
本文主要写的是,如何编写一个插件来解析<references>标签,并将其转换为HTML,这种方法可以应用于其他自定义标签和功能,为Vue.js应用程序中的Markdown渲染提供了极大的灵活性,感兴趣的朋友跟随小编一起看看吧2024-07-07
基于Vue3+TypeScript实现抖音式卡片滑动交互功能
本文介绍如何用 Vue 3 + TypeScript 实现类似抖音的卡片滑动交互,应用于单词记忆场景,完整方案包含手势识别、堆叠动画、实时反馈和状态管理,需要的朋友可以参考下2026-06-06


最新评论