ant-design-vue a-table列伸缩vue-draggable-resizable

 1. 在Vue的Table组件中，实现可伸缩列，如果你使用的是Element-Ui那么这是一个现成的功能，如果你使用的是ant-design-vue，那么是需要集成一个vue-draggable-resizable插
件使用步骤：
**1.安装**： npm install vue-draggable-resizable
**2.创建公共js文件**

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

function drawinit (tabcolumns) {   console.log(tabcolumns);
    const draggingMap = {};
    tabcolumns.forEach(col => {
      const key = col.dataIndex || col.key
      draggingMap[key] = col.width || 0;
    });
    const draggingState = Vue.observable(draggingMap);
    return (h, props, children) => {
      let thDom = null;
      const { key, ...restProps } = props;
      console.log(key);
      console.log(props);
      let col;
      // 如果有复选框需判断key值是否为selection-column否则报错width undefinde
      if(key === "selection-column" ) {
        col ={}
      } else {
        console.log(tabcolumns);
        col = tabcolumns.find(col => {
          console.log(col);
          //  console.log(tabcolumns);
        const k = col.dataIndex || col.key;
        console.log(k);
        return  k === key
      });
      console.log(col);
      }
    // }
      console.log(col);
      if (!col.width) {
        return <th {...restProps}>{children}</th>;
      }
      const onDrag = x => {
        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}
          ></vue-draggable-resizable>
        </th>
      );   } } export default {   methods:{
    drag(columns){
      return {
        header: {
          cell: drawinit(columns),
        },
      }
    }   } }
**3. 引入表格拖拽配置混入当前使用组件**  
<script> import drag from '@/components/TableDrag/drag';   export default{
    mixins: [drag], }; </script>
**4.table组件设置components属性**  
<a-table bordered :columns="columns" :components="componentsColumns()" :scroll="{ x: 1500 }">
    <template v-slot:action>
      <a href="javascript:;">Delete</a>
    </template>   </a-table>   <script> // 引入表格表头字段 import fileDataCols from '@/pages/fileManage/fileListCols';   export default{
     methods: {
    componentsColumns() {
            return {
                header: {
                // 此处传值需要注意时序（否则报错width undefinde）
                    cell: this.initDrag(tabcolumns),
                }
            }
        }, }; </script> 
**5.css**
.resize-table-th {
    position: relative;
    .table-draggable-handle {
      transform: none !important;
      position: absolute;
      height: 100% !important;
      bottom: 0;
      left: auto !important;
      right: -5px;
      cursor: col-resize;
      touch-action: none;
    }
}
        **注：columns中width，dataIndex为必须**