3. ant design vue table 集成vue-draggable-resizable 来实现可伸缩列

在Vue的Table组件中，实现可伸缩列，如果你使用的是Element-Ui那么这是一个现成的功能，如果你使用的是ant-design-vue，那么是需要集成一个vue-draggable-resizable插件但是官网示例的代码并不能直接使用，以下是封装的a-table组件

1. 先引入vue-draggable-resizable（先安装依赖）

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

2. 在Table添加 components属性

<a-table
      :bordered="bordered"
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource"
      :rowKey="rowKey"
      :pagination="pagination"
      :expandedRowKeys="expandedRowKeys"
      :expandedRowRender="expandedRowRender"
      @change="onChange"
      :rowSelection="selectedRows ? {selectedRowKeys: selectedRowKeys, onChange: updateSelect} : undefined"
      :components="components" 
      :scroll="{ x: 1000, y: 300 }"
    >
</a-table>

3. 在 computed中添加方法

computed: {
    components () {
    // Ant Design of Vue Table有边框才有此功能
      if (this.bordered) {
        return {
          header: {
            cell: (h, props, children) => {
              console.log(this.columns,'this.columns')
              const { key, ...restProps } = props
              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,
                  transform: 'none',
                  resizable: false
                },
                on: {
                  dragging: (x) => {
                    col.width = Math.max(x, 90)
                  }
                }
              }
              const drag = h('vue-draggable-resizable', { ...dragProps })
              return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
            }
          }
        }
      } else {
        return {}
      }
    }
  }

4. 添加样式

<style scoped lang="less">
.standard-table{
  // 实现可伸缩列样式 
  .resize-table-th {
    position: relative;
    .table-draggable-handle {
      height: 100% !important;
      bottom: 0;
      position: absolute;
      left: auto !important;
      transform: none !important;
      right: -5px;
      z-index: 100 !important;
      cursor: col-resize;
      touch-action: none;
    }
  }
}
</style>

封装拖拽组件

1. 在util文件下新增 draggable-resizable.js

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

export const dragResizableFunc = ( columns )=>{
    return {
        header: {
          cell: (h, props, children) => {
            const { key, ...restProps } = props
            const col = 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,
                transform: 'none',
                resizable: false
              },
              on: {
                dragging: (x) => {
                  col.width = Math.max(x, 90)
                }
              }
            }
            // console.log(dragProps,'dragProps')
            const drag = h('vue-draggable-resizable', { ...dragProps })
            // console.log(drag,'drag')
            return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
          }
        }
      }
}

2. 
3. 

. 注意点：

1. 列伸缩有两个属性，width和dataIndex必有属性，且width必须为数值，不能为百分比。
2. 如果table的表头存在动态表头的情况下，就会对列拖拽功能有影响，存在失灵情况，此时需要特殊处理。需要给table加上v-if判断