使用ant design vue中a-table实现自定义列拖拽 以及解决列拖拽时表格大小跟着变化的问题

函数和css部分如下：

<script lang="ts">

import { TableColumnsType } from "ant-design-vue"

import { ref, reactive } from "vue";

let isHidden = ref<boolean>(false);

// columns是关于列的配置项，在需要被拖拽的列中加入resizable: true

//注意！写了resizable: true属性的列一定要定义width，方便后面计算列宽，没写resizable: true一定不能定义width，否则表格整体会随着列的拖拽一起变宽

const columns = ref<TableColumnsType>([

    { title: 'id', dataIndex: 'id', key: 'id', width: 80, resizable: true, minWidth: 80},

    { title: 'name', dataIndex: 'name', key: 'name', ellipsis: true, resizable: true, minWidth: 100 ,width: 150 },

    { title: 's', dataIndex: 's', key: 's', ellipsis: true, resizable: true, width:150},

    { title: 'v', dataIndex: 'v', key: 'v', ellipsis: true },

    { title: 't', dataIndex: 't', key: 't', ellipsis: true },

    { title: 'e', dataIndex: 'e', key: 'e' },

]);

// 列表中的data

const getList = reactive([

    {id:'1',name:'name',s:'s',v:'0.1',t:'2023',e:true},

    {id:'1',name:'name',s:'s',v:'0.1',t:'2023',e:true},

    {id:'1',name:'name',s:'s',v:'0.1',t:'2023',e:true},

    {id:'1',name:'name',s:'s',v:'0.1',t:'2023',e:true},

    {id:'1',name:'name',s:'s',v:'0.1',t:'2023',e:true}

])

//实现列拖拽功能的函数

const handleResizeColumn = (w: number, col: any) => {

    if (col) {

        col.width = w;

    }

    var width = Number(columns.value[0].width) + Number(columns.value[1].width) + Number(columns.value[2].width)

    if (width>550) {    //当被拖拽的三列宽度相加超过一定数值时 将超出部分隐藏

        columns.value[5].ellipsis = true

        isHidden.value = true

    } else {

        columns.value[5].ellipsis = false

        isHidden.value = false

    }

}

export default ({

    setup() {

        getList

        return {

            getList,

            isHidden,

            columns,

            handleResizeColumn

        };

    },

});

</script>

<style scoped lang="scss">

    .table_hidden {

        overflow: hidden;

    }

</style>

html部分如下：

<template>

        <div :class="isHidden ? 'table_hidden' : ' '" style="width: 900px; margin-left: 25%;">

            <!-- 当isHidden为true时 为div加上table_hidden的样式 即超出部分隐藏 这样拖拽时跟着移动的表格部分就会被隐藏了 -->

            <!-- 也可以直接为这个div加上超出部分隐藏的属性 我是因为还有一些特殊的需求不能让他直接隐藏 只能判断当宽度大于一定值时再隐藏 -->

            <a-table :columns="columns" :data-source="getList" class="list_body"

                 style="width:100%" @resizeColumn="handleResizeColumn">

            </a-table>

            <!-- @resizeColumn="handleResizeColumn" 设置列拖拽方法 handleResizeColumn是拖拽时调用的函数-->

        </div>

</template>