Ant Design Vue2 表格实现可拖动的伸缩列,阻止拖动后排序

一：安装 vue-draggable-resizable 插件

npm install --save [email protected]

 二：如果多处地方需要使用建议放在mixins里面,只有一个页面使用直接写在要使用的页面,我这里是放在mixins里面

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;

    // 由于drag事件结束后必然会出发click事件，所以需要一个参数去判断当前操作是click点击事件还是drag拖拽事件

    // 阻止拖动后触发排序事件,此方法只能在vue2+antd1上使用，对于其他版本并不适配。

    let isDrag = false;

    const { key, ...restProps } = props;

    let col;

    if (key === "selection-column") {

      //表格加了复选框，不加这个判断col会是undefided

      col = {};

    } else {

      col = columns.find(col => {

        const k =