The function and css part is as follows:
<script lang="ts">
import { TableColumnsType } from "ant-design-vue"
import { ref, reactive } from "vue";
let isHidden = ref<boolean>(false);
// columns are configuration items about columns, add resizable: true to the columns that need to be dragged
//Notice! The column with resizable: true attribute must define width, which is convenient for calculating the column width later. If resizable: true is not written, width must not be defined , otherwise the entire table will become wider as the column is dragged and dropped
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 in the list
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}
])
//Function to implement column drag and drop
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) { //When the width of the dragged three columns exceeds a certain value, the excess part will be hidden
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>
The html part is as follows:
<template>
<div :class="isHidden ? 'table_hidden' : ' '" style="width: 900px; margin-left: 25%;">
<!-- When isHidden is true, add the style of table_hidden to the div, that is, the excess part is hidden, so that the part of the table that moves with the drag will be hidden -->
<!-- You can also directly add hidden attributes to this div because there are still some special requirements that cannot be hidden directly. You can only hide it when the width is greater than a certain value-- >
<a-table :columns="columns" :data-source="getList" class="list_body"
style="width:100%" @resizeColumn="handleResizeColumn">
</a-table>
<!-- @resizeColumn="handleResizeColumn" Set the column dragging method handleResizeColumn is the function called when dragging -->
</div>
</template>