vue + antdesign使用vue-draggable-resizable实现表格列拖拽

需求： 表格列太多，想要自定义拖拽宽度。antdesign 3.0+版本table自带伸缩列的功能，但我项目中用的是1.0+版本，所以只有结合vue-draggable-resizable拖拽插件来实现了

实现代码：
1.下载插件依赖

npm install --save vue-draggable-resizable

1
2.在main.js中引入插件

import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)

3.在使用页面中重新引入插件

import VueDraggableResizable from 'vue-draggable-resizable'

4.在table 组件中添加components属性

<a-table
        bordered
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="pagination"
        :rowKey="(record,index)=>{return index}"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
        :scroll="{x:'max-content',y:540}"
        :components='components'>
</a-table>

5.在data中定义components属性代码(columns每一列都要设置width，如果不设置width属性，拖动时不生效)

<script>
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
components: {
    VueDraggableResizable
  },
  data() {
    this.components = {
      header: {
        cell: (h, props, c