Vue+ant-design-vue 表格实现可拖动的伸缩列

        应客户要求，表格要实现列宽可以自主调节，用户可以根据自己的喜好，拖动列边框，左右拖动实现列宽的扩大和缩小；ant-design-vue官方文档中，table组件中提供了此功能的示例代码。于是我满怀开心的复制到了我的项目中，结果处处报错，红彤彤的一大片。在修改无果后，我去请教了 无所不会的网友 最后整理了一套可用的。

        这篇笔记以 步骤 的形式一步一步的记录如何实现这个功能。有需要的小伙伴可以按照步骤走一遍。

        步骤一：安装集成的 vue-draggable-resizable 插件

npm install --save vue-draggable-resizable

        步骤二：在项目的main.js中引入插件

// 挂载全局使用的方法
import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)

        步骤三：在使用页面中重新引入根vue实例和插件

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

注：你可能觉得在main.js中已经引入了插件并且定义成了全局的方法，在这里引入会多此一举。但是我实验过，在使用页面中如果不引入，插件就不能使用，main.js不注册，插件也不能使用。我是不知道为什么，如果有人知道，或者有改进措施，请教教我。

        步骤四：ant-design-vue 的 table 组件中添加components属性

        步骤五：定义components属性代码 

  data() {
    this.components = {
      header: {
        cell: (h, props, children) => {
          const { key, ...restProps } = props
        
        // 此处的this.columns 是定义的table的表头属性变量

          const col = this.columns.find((col) => {
            const k = col.dataIndex || col.key
            return k === key
          })

          if (!col || !col.width) {
            return h('th', { ...restProps }, [...children])
          }

          const dragProps = {
            key: col.dataIndex || col.key,
            class: 'table-draggable-handle',
            attrs: {
              w: 10,
              x: col.width,
              z: 1,
              axis: 'x',
              draggable: true,
              resizable: false,
            },
            on: {
              dragging: (x, y) => {
                col.width = Math.max(x, 1)
              },
            },
          }
          const drag = h('vue-draggable-resizable', { ...dragProps })
          return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
        },
      },
    }
    return {
    }
   
  },

完整代码：

注意点：

1，表头columns中，每一列都要设置width，如果不设置width属性，拖动时不生效；

2，style一定要记得添加.table-draggable-handle 和 .resize-table-th 两个class。并且style标签不能家scoped属性。

以上便是可拖拽控制列宽功能的实现步骤。希望对大家有帮助。

拜了个拜！迪迦。。。