步驟一：安裝集成的 vue-draggable-resizable 插件，npm下載報錯，有安裝了cnpm也可以

npm install --save vue-draggable-resizable

步驟二：在src文件夾內(nèi)創(chuàng)建mixins文件夾谢鹊，在mixins文件夾內(nèi)創(chuàng)建tableDragResize.js

import Vue from "vue";
import VueDraggableResizable from "vue-draggable-resizable";

Vue.component("vue-draggable-resizable", VueDraggableResizable);
function initDrag(columns) {
  const draggingMap = {};
  columns.forEach((col) => {
    draggingMap[col.key] = col.width;
  });
  const draggingState = Vue.observable(draggingMap);
  return (h, props, children) => {
    let thDom = null;

    const { key, ...restProps } = props;
    let col;
    if (key === "selection-column") {
      //表格加了復(fù)選框瞳遍，不加這個判斷col會是undefided
      col = {};
    } else {
      col = columns.find((col) => {
        const k = col.dataIndex || col.key;
        return k === key;
      });
    }
    if (!col || !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: initDrag(columns),
        },
      };
    },
  },
};

步驟三：在使用頁面中引入tableDragResize.js, 同時添加 mixins: [tableDragResize]

<script >
  import tableDragResize from '@/mixins/tableDragResize'

  export default {
    name: 'HeaderNotice',
    mixins: [tableDragResize],  // 此處不要忘記
    data() {
      return {}
    }
  }
</script>

步驟四：table 組件中添加components屬性,drag(columns)方法的參數(shù)是當(dāng)前表頭集合數(shù)據(jù)

<a-table 
        :pagination="false" 
        bordered 
        :columns="columns" 
        :data-source="dataSource" 
        :rowKey="(record) => record.id"
        :row-selection="{ selectedRows: selectedRows, onChange: onSelectCheckChange }"
        :components="drag(columns)"
        >
</a-table>

步驟五：添加以下樣式

/deep/.table-draggable-handle {
  border:1px solid red;
  height: 100% !important;
  left: auto !important;
  right: -5px;
  cursor: col-resize;
  touch-action: none;
  border: none;
  position: absolute;
  transform: none !important;
  bottom: 0;
}
/deep/.resize-table-th {
  position: relative;
}

注意點(diǎn)：

1，表頭columns中双谆，每列都要設(shè)置width，width的值必須Number席揽，如果不設(shè)置width屬性顽馋，拖動時不生效；

2幌羞，style一定要記得添加.table-draggable-handle 和 .resize-table-th 兩個class寸谜。并且style標(biāo)簽不能添加scoped屬性。