and design vue2版的table表格不能拖拽列的宽度，通过vue-draggable-resizable插件实现
我用的是and design 1.7.8的版本，先下插件

yarn add vue-draggable-resizable@2.1.0

我这版本的and design用最新3.0.0以上的插件会有问题，实现不了效果，换了低版本就没问题了
官方也有教使用方法，但会报错，按照官方的来写，需要把ResizeableTitle改成resizeableTitle这样就解决了最开始的报错

官方使用地址
下面是我封装的table公用组件，但是这样弄问题很多，在表格里加一下操作的时候很容易有问题，所以谨慎用这玩意

<template>
  <div class="tableCommon-wrapper">
    <a-table
      v-if="istrue"
     :expandIconColumnIndex="expandIconColumnIndex" 
     :expandIconAsCell="expandIconAsCell"
     :defaultExpandAllRows="defaultExpandAllRows" 
     :columns="columns" 
     :dataSource="data" 
     :loading="loading"
     :indentSize="indentSize" 
     :pagination="pagination" 
     :row-selection="rowSelection"
     :childrenColumnName="childrenColumnName" 
     size="middle" 
     :customHeaderRow="tableHeader" 
     @change="handleTableChange"
     :rowKey="rowkey" 
     :scroll="scroll" 
     :bordered="bordered" 
     :hideDefaultSelections="hideDefaultSelections"
     :components="components"
    >
      <template slot-scope="text, record, index" :slot="slot"
        v-for="slot in Object.keys($scopedSlots).filter(key => key !== 'expandedRowRender')">
        <slot :name="slot" v-bind="{ text, record, index }"></slot>
      </template>
    </a-table>
  </div>
</template>

<script>
import Vue from "vue";
import VueDraggableResizable from "vue-draggable-resizable";
Vue.component("vue-draggable-resizable", VueDraggableResizable);

export default {
  name: 'ttable',
  props: {
    childrenColumnName: {
      type: String
    },
    rowkey: {
      type: String
    },
    tableHead: {
      type: Array,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    indentSize: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: Boolean | Number
    },
    pagination: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: Boolean | Object
    },
    rowSelection: {
      type: Object
    },
    scroll: {
      type: Object,
      // default:()=> ({x: 1200, y: 600}) ,
    },
    expandIconAsCell: {
      type: Boolean
    },
    expandIconColumnIndex: {
      type: Number
    },
    size: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: String | Number
    },
    bordered: {
      type: Boolean,
      default: true
    },
    defaultExpandAllRows: {
      type: Boolean,
      default: false
    },
    hideDefaultSelections: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      data:[],
      columns:[],
      istrue:false,
    }
  },
  watch:{
    tableHead(newdata){
      console.log('表格头部',newdata)
      this.columns = JSON.parse(JSON.stringify(newdata));
    },
    tableData(newdata){
      console.log('表格数据',newdata)
      this.data = JSON.parse(JSON.stringify(newdata));
    }
  },
  mounted(){
    this.init()
  },
  methods: {
    init(){
      console.log('阿里嘎多',this.tableHead)
      const draggingMap = {};
      this.columns = JSON.parse(JSON.stringify(this.tableHead));
      // this.columns = columns;
      this.data = JSON.parse(JSON.stringify(this.tableData));
      this.columns.forEach(col => {
        draggingMap[col.key] = col.width;
      });
      const draggingState = Vue.observable(draggingMap);
      const that = this;
       this.components = {
        header: {
          cell: (h, props, children) => {
            let thDom = null;
            const { key, ...restProps } = props;
            const col = that.columns.find(col => {
              const k = col.dataIndex || col.key;
              return k === key;
            });
            if (!col.width) {
              return <th {...restProps}>{children}</th>;
            }
            const onDrag = (x, y) => {
              draggingState[key] = 0;
              col.width = Math.max(x, 1);
            };

            const onDragstop = () => {
              draggingState[key] = thDom.getBoundingClientRect().width;
            };
            return (
              <th
                {...restProps}
                v-ant-ref={r => (thDom = r)}
                width={col.width}
                class="resize-table-th"
              >
                {children}
                <vue-draggable-resizable
                  key={col.key}
                  class="table-draggable-handle"
                  w={10}
                  x={draggingState[key] || col.width}
                  z={1}
                  axis="x"
                  draggable={true}
                  resizable={false}
                  onDragging={onDrag}
                  onDragstop={onDragstop}
                />
              </th>
            );
          }
        }
      };
      this.istrue=true;
      console.log('来阿拉啦啦啦',this.components)
    },
    tableHeader(column) {
      // console.log("column",column);
      column.forEach((e, index) => {
        column[index].className = 'table-thead';
      });
    },
    handleTableChange(val) {
      console.log("valllsadlalsdlsa:",val);
      this.$emit('changeCurrent', val.current);
    }
  }
}
</script>

<style lang='scss'>
.resize-table-th {
  position: relative;

  .table-draggable-handle {
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
  }
}

::v-deep .ant-table-thead>tr>th {
  background: #f6f6f6;
  height: 50px;
  font-family: PingFang SC-Medium, PingFang SC;
}

::v-deep .ant-table-tbody {
  background-color: #ffffff;
}

::v-deep .ant-table-header-column .ant-table-column-title {
  font-size: 15px;
  font-weight: bold;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  color: #333333;
}
</style>