[ant-design-vue] table组件列宽拖拽功能

vue2.x 拖动table组件列宽功能

环境信息

    "ant-design-vue": "^1.7.1",
    "vue": "^2.6.11",
    "vue-draggable-resizable": "^2.2.0",

相关代码

<template>
    <a-table :columns="columns" :loading="loading" :dataSource="data" :scroll="scroll" :pagination="false" :customRow="customRow" :rowKey="setRowKey" :rowClassName="rowClassName" :components="resizeComp">
    </a-table>
</template>

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

export default {
    name: "resize-table",
    props: [
        "data",
        "loading",
        "columns",
        "customRow",
        "scroll",
        "rowClassName"
    ],
    data() {
        this.resizeComp = {
            header: {
                cell: (h, props, children) => {
                    const { key, ...restProps } = props;
                    const col = this.columns.find(colItem => {
                        const k = colItem.dataIndex || colItem.key;//列索引
                        return k === key
                    });

                    if (!col || !col.width) {
                        return h('th', { ...restProps }, [...children])
                    }

                    const dragProps = {
                        key: col.dataIndex || col.key,
                        class: 'table-draggable-handle',
                        attrs: {
                            w: 10,
                            x: col.width,
                            z: 1,
                            axis: 'x',
                            draggable: true,
                            resizable: false
                        },
                        on: {
                            dragging: (x, y) => {
                                col.width = Math.max(x, 10);//留出空白
                            }
                        }
                    };
                    restProps.attrs.widh = col.width;
                    const drag = h('vue-draggable-resizable', { ...dragProps });
                    return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
                }
            },
        };
    },
    methods: {
        setRowKey(record, index) {
            return index;
        }
    }
};
</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;
        transform: translate(0px, 0px) !important;
        position: absolute;
        top: 0;
    }
}
</style>

原有的样式文件没有使用的必要，个人添加的部分样式内容就符合需求了

vue3.x 拖动table组件列宽功能

环境信息

    "ant-design-vue": "^3.2.13",
    "vue": "^3.2.45",

相关代码

vue3.x对应的ant-design-vue中的table组件本身支持列宽的拖动了，不需求额外的包的支持,根据Api说明设置resizeColumn即可

<template>
  <a-table
    :columns="options.columns"
    :loading="options.loading"
    :dataSource="options.data"
    :scroll="options.scroll"
    :customRow="options.customRow"
    :rowKey="options.setRowKey"
    :rowClassName="options.rowClassName"
    :row-selection="options.rowSelection"
    @resizeColumn="handleResizeColumn"
    :bordered="options.bordered"
  >
  </a-table>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";

defineProps({
	options: {
		type: Object,
		require: true
	}
})
const handleResizeColumn = (w, col) => {
	col.width = w;
};
</script>