【vue && ant design vue】利用vue-draggable-resizable插件实现表格拖拽

就很坑，为什么ant design vue没有表格拖拽？这应该是一个常用并且基本的组件功能，elementui的表格拖拽却如此丝滑。。。

官网上说使用vue-draggable-resizable插件来实现，拖拽了一下官网上实现的，真的很丝滑，但是自己做完后，卡卡卡卡卡卡顿。。。

1.下载

为什么我这里指定了版本？？？因为别的版本我试了，同样的代码，这个版本行，别的版本不行 ，，，就能用就行

npm i vue-draggable-resizable@2.1.0

 

 2.实现

/**
 * 表格列拖拽
 * @param { 表格columns } tbCols 
 */
function initDrag(tbCols) {

  const draggingMap = {};

  tbCols.forEach(col => {
    draggingMap[col.key] = col.width;
  });

  const draggingState = Vue.observable(draggingMap);

  return (h, props, children) => {
    let thDom = null;
    const { key, ...restProps } = props;
    const col = tbCols.find((item) => {
      const k = item.dataIndex || item.key;
      return k === key;
    });

    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={true}
          onDragging={onDrag}
          onDragstop={onDragstop}
        ></vue-draggable-resizable>
      </th>
    );
  };
}


//mixin/common.js
import Vue from "vue";
import VueDraggableResizable from "vue-draggable-resizable";
Vue.component("vue-draggable-resizable", VueDraggableResizable);
//mixin中代码，将表格拖拽方法写在mixin中，混入每一个组件的methods中，就相当于是公共方法
export default {
    methods:{
        /**
         * https://github.com/mauricius/vue-draggable-resizable
         * 表格列可拖拽
         * 表格上使用：:components="drag(columns)"
         * tips:columns中需包含key和width(Number)
         */
        drag(columns) {
            return {
                header: {
                    cell: initDrag(columns)
                }
            }
        }
    }
};

 插件拖拽样式

/* vue-draggable-resizable@2.1.0 begin */
.resize-table-th {
    position: relative;
    overflow: hidden;
}
.resize-table-th .table-draggable-handle {
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
}
/* 插件 end */

 在表格中使用

 适用于列数变动的情况，丝滑度一般偏下。 

//:components="drag(colums)" 传入列即可
<a-table :columns="columns" :components="drag(colums)" :data-source="list" rowKey="id" :pagination="pagination" @change="handleTableChange" class="table">
</a-table>