ant-design-vue的table 可伸缩列 vue-draggable-resizable 2.3.0

参考

https://www.jianshu.com/p/920103367133

"vue-draggable-resizable": "2.3.0",

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

const columns = [
    {
        title: '来源',
        align: "center",
        dataIndex: 'aaaa',
        width: 100,
    },
    {
        title: '代码',
        align: "center",
        dataIndex: 'bbbb',
        width: 100,
    },
     
]
const draggingMap = {};
columns.forEach((col) => {
    const k = col.dataIndex || col.key;
    draggingMap[k] = col.width;
});
const draggingState = Vue.observable(draggingMap);
const resizeableTitle = (h, props, children) => {
    let thDom = null;
    const { key, ...restProps } = props;
    let col;
    if (key === 'selection-column') {
        col = {};
    } else {
        col = columns.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={draggingState[key]}
            class="resize-table-th"
        >
            {children}
            <vue-draggable-resizable
                key={col.dataIndex || col.key}
                class="table-draggable-handle"
                w={10}
                x={col.width || draggingState[key]}
                z={1}
                axis="x"
                draggable={true}
                resizable={false}
                onDragging={onDrag}
                onDragstop={onDragstop}
            ></vue-draggable-resizable>
        </th>
    );
};Ï

data() {
        this.components = {
            header: {
                cell: resizeableTitle,
            },
        };
        return {
            description: '客户管理管理页面',
            ysbmvalue: 'khglxx',  //映射表值（客户管理 value）
            // 表头
            columns,
            defColumns: columns, //默认列
             
        }
    },

<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>