Ant Design of Vue Table 表格可伸缩列 -- 排坑指南

最近在用 ant-design-vue 开发项目时遇到一个表格列需要支持拖拽改变宽度，这个功能在 element-ui上直接可以使用，但 ant-design-vue 需要引用一个叫 vue-draggable-resizable 的插件才能实现，接着安装了 vue-draggable-resizable 2.2.0版本，本以为很简单照着官网写即可，没想到官网的demo在本地一直报错：

网上搜了一大堆也没有解决，最终在github上找到了一个解决方案，官网的实例可以复制过来使用，但需要进行改造：

ResizeableTitle报错问题：ResizeableTitle 改成 resizeableTitle;
表格没有拖动滑块样式问题：.table-draggable-handle 里加上 transform: none !important; position: absolute;
去掉style的scoped属性;
动态表头无法拖动问题：将columns定义在data中不要放在computed里

按照以上步骤修改完，就可以正常使用了。

完整代码如下：

<template>
  <a-table
    bordered
    :columns="columns"
    :components="components"
    :data-source="data"
  >
    <template v-slot:action>
      <a href="javascript:;">Delete</a>
    </template>
  </a-table>
</template>

<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 data = [
  {
    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",
  },
];

const draggingMap = {};
columns.forEach((col) => {
  draggingMap[col.key] = col.width;
});
const draggingState = Vue.observable(draggingMap);
const resizeableTitle = (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) => {
    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 {
  name: "App",
  data() {
    this.components = {
      header: {
        cell: resizeableTitle,
      },
    };
    return {
      data,
      columns,
    };
  },
};
</script>

<style lang="less">
.resize-table-th {
  position: relative;
  .table-draggable-handle {
    transform: none !important;
    position: absolute;
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
  }
}
</style>

这里附上方案二：https://blog.csdn.net/weixin_45727040/article/details/108831864

其实在方案二中，使用最新版vue-draggable-resizable 2.2.0，只需在.table-draggable-handle 样式中加上以下三个属性也可：

{
    position: absolute;
    transform: none !important;
    bottom: 0;
  }