Ant Design Vue 表格实现可拖动的伸缩列

步骤一：安装集成的 vue-draggable-resizable 插件，npm下载报错，有安装了cnpm也可以

npm install --save vue-draggable-resizable

步骤二：在src文件夹内创建mixins文件夹，在mixins文件夹内创建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") {
      //表格加了复选框，不加这个判断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)方法的参数是当前表头集合数据

<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;
}

注意点：

1，表头columns中，每列都要设置width，width的值必须Number，如果不设置width属性，拖动时不生效；

2，style一定要记得添加.table-draggable-handle 和 .resize-table-th 两个class。并且style标签不能添加scoped属性。