Vue项目（Ant Design of Vue）踩坑记之——表格header可伸缩

务必注意事项：

1. vue-draggable-resizable的版本必须是2.1.0，其他版本有冲突。
   npm install vue-draggable-resizable@2.1.0；
2. 必须在table-draggable-handle样式中加入：transform:none; position:absolute 否则不起效果;

// 表格拖拽
.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;
        border: none;
    }
}

3. 表格要加bordered属性，以及colums数据中一定要加width宽度，不然会报错;

4. 表格的colums数据中要加dataIndex 或者key属性，否则报错。columns的Item中不一定都是key,(大部分不是key);

5. <a-table>标签添加vue属性:components=“components”
   表格加了复选框时，col为undefined，需要添加判断；
   

6. columns必须定义在data中，放在计算属性（多语言）中拖拽不生效；==》在data中定义，methods中的初始化表头的方法initColumns返回，切换多语言时，重新调用初始化方法initColumns；
   

7. 切换多语言后，表格不可拖拽；==》给table添加v-if="tableVisible"

reloadTable() {
    (this as any).tableVisible = false;
    (this as any).$nextTick(() => {
        (this as any).tableVisible = true;
    });
},

drag.js文件

import Vue from 'vue';
const initDrag = function(tbCols) {
    const draggingMap = {};
    tbCols.forEach((col) => {
        const key = col.dataIndex || col.key; //这儿要求表格数据中要有这两个属性
        draggingMap[key] = col.width || 0;
    });
    const draggingState = Vue.observable(draggingMap);
    return (h, props, children) => {
        let thDom = null;
        const { key, ...restProps } = props;
        let col;
        if (key === 'selection-column') {
            //表格加了复选框，不加这个判断col会是undefided
            col = {};
        } else {
            col = tbCols.find((item) => {
                const k = item.dataIndex || item.key;
                return k === key;
            });
        }
        //这儿要求表格数据中要有宽width属性，若是没有是不会执行下面的拖拽的
        if (!col || !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.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>
        );
    }
}
export default initDrag;