ant-design-vue 表格(拖拽)伸缩列实现

表格拖拽应该是个很基础的功能了，一般功能全一些的table插件都会带着，并且文档也简洁易懂，然而，我却在ant-design-vue这个ui组件库碰了壁，官方表格伸缩列示例粘贴过来会报错的好嘛，再加上这个功能甲方爸爸提了很多次，就不得不勇敢面对了！！那就让我用baidu、google + c v 大法来解决下，结果网上的文章不是不能用就是不好用，那就只能靠自己了，下面就把代码贴上，在贴上前，要先安装两个jsx的插件和vue-draggable-resizable拖拽插件，很简单，命令如下

npm install --save-dev @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props   
//或者
yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props -D  
//然后 安装vue-draggable-resizable插件 注意版本号是2.1.0
npm install vue-draggable-resizable@2.1.0
//或者
yarn add vue-draggable-resizable@2.1.0

然后新建个vue文件，把下面代码粘上去

<script>
import Vue from "vue";
import VueDraggableResizable from "vue-draggable-resizable";

Vue.component("vue-draggable-resizable", VueDraggableResizable);

const columns = [
  {
    title: "Date",
    dataIndex: "date",
    width: 200,
  },
  {
    title: "Amount",
    dataIndex: "amount",
    width: 100,
  },
  {
    title: "Type",
    dataIndex: "type",
    width: 100,
  },
  {
    title: "Note",
    dataIndex: "note",
    width: 100,
  },
  {
    title: "Action",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];

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

// const draggingState = Vue.observable(draggingMap); 状态共享，如果你需要的话可以加上 vue 需要2.6.0以上
export default {
  name: "sortTable",
  data() {
    return {
      datas: [
        {
          key: 0,
          date: "2018-02-11",
          amount: 120,
          type: "income",
          note: "transfer",
        },
        {
          key: 1,
          date: "2018-03-11",
          amount: 243,
          type: "income",
          note: "transfer",
        },
        {
          key: 2,
          date: "2018-04-11",
          amount: 98,
          type: "income",
          note: "transfer",
        },
      ],
      draggingState: draggingMap,
    };
  },
  render(h) {
    return (
      <a-table
        bordered
        columns={columns}
        components={{
          header: {
            cell: (h, props, children) => {
              let thDom = null;
              const { key, ...restProps } = props;
              const col = columns.find((col) => {
                const k = col.dataIndex || col.key;
                return k === key;
              });
 
              if (!col.width) {
                return <th {...restProps}>{children}</th>;
              }
              const onDrag = (x) => {
                this.draggingState[key] = 0;
                col.width = Math.max(x, 1);
              };

              const onDragstop = () => {
                this.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={this.draggingState[key] || col.width}
                    z={1}
                    axis="x"
                    draggable={true}
                    resizable={false}
                    onDragging={onDrag}
                    onDragstop={onDragstop}
                  ></vue-draggable-resizable>
                </th>
              );
            },
          },
        }}
        data-source={this.datas}
      ></a-table>
    );
  },
};
</script>
<style lang="less">
.resize-table-th {
  position: relative;
  .table-draggable-handle {
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
  }
}
</style>

好了，现在你在看看是不是可以拖拽了？不行？留言我来帮你解决