ant-design-vue 集成 vue-draggable-resizable 实现可伸缩列

最近在用ant-design-vue开发项目时遇到一个表格列需要支持拖拽改变宽度,这个功能在element-ui上直接可以使用,但ant-design-vue需要引用一个叫vue-draggable-resizable的插件才能实现,本以为很简单照着官网写即可,没想到官网的demo在本地一直报错:

image.png

网上搜了一大堆也没有解决,最终在github上找到了一个解决方案,官网的实例可以复制过来使用,但需要进行改造:

ResizeableTitle报错问题:ResizeableTitle 改成 resizeableTitle;
表格没有拖动滑块样式问题:.table-draggable-handle 里加上 transform: none !important; position: absolute;
去掉style的scoped属性;
动态表头无法拖动问题:将columns定义在data中不要放在computed里

完整代码如下:







你可能感兴趣的:(ant-design-vue 集成 vue-draggable-resizable 实现可伸缩列)