ant-design-vue实现可伸缩列(拖拽)的表格,不使用jsx

最近在使用ant-design-vue做表格时,遇到要做一个可伸缩列表格的需求,但是官网示例的代码并不能直接使用,经过一段时间研究以后发现了可以实现功能的方法。

经过尝试发现直接修改columns[index].width可改变表格列的宽度,这也是最核心的原理。
之后就需要想办法实现这个功能,官方示例使用vue-draggable-resizable来实现拖拽,那我们就继续使用这个插件。

实现过程:
1.查看ant-design-vue中table的api后发现需要增加components的配置项
2.查看vue-draggable-resizable的示例增加拖动组件的配置,并在dragging事件中设置表格的宽度
3.动态创建vue-draggable-resizable组件

完整示例代码





你可能感兴趣的:(ant-design-vue实现可伸缩列(拖拽)的表格,不使用jsx)