vben admin(ant-design-vue2 + vue3)表格实现列拉伸
基于vben admin实现table表格列拖拽拉伸的功能
背景
公司项目中使用了vben admin作为后台管理系统的框架,但是ant-design-vue2的表格没有列拖拽的属性,直接引入vue3-draggable-resizable后,发现表格鼠标效果出现,但是拖动时表格列宽度没有改变
第一步
首先在项目中安装引入vue3-draggable-resizable插件,我是参考的以下链接引入的
参考引入方式
第二步
在useColumns中返回columnsRef
修改BasicTable.vue中参考第一步中引入方式引入的代码:
此时表格列宽度已经可以拖动。
bug
上述方式只能解决表格没有操作项时的列拖动,如果表格有操作项时也会改变列宽,但是拖拽感觉有延迟效果,类似卡顿,并不完美,目前还没有找到解决方式,希望解决了的伙伴们可以告诉我一下。