Ant Design Vue中table表格集成 vue-draggable-resizable 来实现可伸缩列

表格里的内容过长隐藏，想通过拖拽改变列宽显示表格内的内容

代码实现如下 ：

1、添加依赖
下载插件依赖：

npm install --save vue-draggable-resizable

引入插件：

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

Vue.component('vue-draggable-resizable', VueDraggableResizable)
</script>

2、在table 组件中添加bordered和components属性

<template>
  <a-table bordered :columns="columns" :components="components" :data-source="list">
    <template v-slot:action>
      <a href="javascript:;">Delete</a>
    </template>
  </a-table>
</template>

3、在data中定义components属性代码
注：columns每一列都要设置width和(dataIndex/key)，如果不设置width属性，拖动时不生效
注： columns中不要加ellipsis这个属性，否则拖拽到最小宽度时，表头和表格会发生错位

<script>
export default {
components: {
    VueDraggableResizable
  },
  data() {
    this.components = {
      header: {
        cell: (h, props, children) => {
          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,
              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 {
      list:[],
      columns:[
        {
          title: 'Date',
          dataIndex: 'date',
          width: 200
        },
        {
          title: 'Amount',
          dataIndex: 'amount',
          width: 100
        },
        {
          title: 'Type',
          dataIndex: 'type',
          width: 100
        },
        {
          title: 'Note',
          dataIndex: 'note',
          width: 100
        },
        {
          title: 'Action',
          key: 'action',
          width: 120,
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  }
}
</script>

4、添加style样式
注：style不能添加scoped属性
注：table-draggable-handle 里加上 transform: none !important; position: absolute;
注:resize-table-th里加上 position: relative;

<style lang="less">
	.table-draggable-handle {
	  transform: none !important;
	  position: absolute;
	  height: 100% !important;
	  left: auto !important;
	  right: -5px;
	  cursor: col-resize;
	  touch-action: none;
	  bottom: 0;
	}
	.resize-table-th {
	  position: relative;
	}
</style>

最终代码：

<template>
  <a-table bordered :columns="columns" :components="components" :data-source="list">
    <template v-slot:action>
      <a href="javascript:;">Delete</a>
    </template>
  </a-table>
</template>

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

Vue.component('vue-draggable-resizable', VueDraggableResizable)
export default {
  components: {
    VueDraggableResizable
  },
  data () {
    this.components = {
      header: {
        cell: (h, props, children) => {
          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,
              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 {
      list: [
        {
          key: 0,
          date: '2018-02-11',
          amount: 120,
          type: 'income',
          note: 'transfer'
        },
        {
          key: 1,
          date: '2018-03-11',
          amount: 243,
          type: 'income',
          note: 'transfer'
        },
        {
          key: 2,
          date: '2018-04-11',
          amount: 98,
          type: 'income',
          note: 'transfer'
        }
      ],
      columns: [
        {
          title: 'Date',
          dataIndex: 'date',
          width: 200
        },
        {
          title: 'Amount',
          dataIndex: 'amount',
          width: 100
        },
        {
          title: 'Type',
          dataIndex: 'type',
          width: 100
        },
        {
          title: 'Note',
          dataIndex: 'note',
          width: 100
        },
        {
          title: 'Action',
          key: 'action',
          width: 120,
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  }
}
</script>

<style lang="less">
.table-draggable-handle {
  transform: none !important;
  position: absolute;
  height: 100% !important;
  left: auto !important;
  right: -5px;
  cursor: col-resize;
  touch-action: none;
  bottom: 0;
}
.resize-table-th {
  position: relative;
}
</style>