antd-vue 1.x a-table组件 可伸缩列功能

因antd-vue官网的可伸缩列table样例有BUG，且该版本已放弃维护，老项目又需要，特此修复该BUG，直接上代码

<template>
    <a-table bordered :columns="columns" :components="components" :data-source="data"></a-table>
</template>

<script>
import Vue from 'vue';
import VueDraggableResizable from 'vue-draggable-resizable';
Vue.component('vue-draggable-resizable', VueDraggableResizable);

export default {
  name: 'App',
  data() {
    return {
      data: [],
      columns: [],
    };
  },
  computed: {
    components() {
        const draggingMap = {};
        this.tableColums.forEach(col => {
            draggingMap[col.key] = col.width;
        });
        const draggingState = Vue.observable(draggingMap);
        return {
            header: {
                cell: (h, props, children) => {
                    let thDom = null;
                    const { key, ...restProps } = props;
                    const col = this.tableColums.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 + 150, 150); // 默认每列150px，且最小150px
                        let tableColums = JSON.parse(JSON.stringify(this.tableColums))
                        this.tableColums = []
                        this.tableColums = tableColums
                    };

                    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]}
                                z={999}
                                axis="x"
                                draggable={true}
                                resizable={false}
                                onDragging={onDrag}
                                onDragstop={onDragstop}
                            ></vue-draggable-resizable>
                        </th>
                    );
                }
            }
        }
    }
  }
};
</script>
<style scoped lang="less">
::v-deep .resize-table-th {
    position: relative;
    overflow: initial;
    .table-draggable-handle {
        height: 100% !important;
        bottom: 0;
        left: auto !important;
        right: -5px;
        cursor: col-resize;
        touch-action: none;
        position: absolute;
        transform: none !important;
    }
}
</style>