函数和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>