<div class="table_show" ref="table_show">
<a-table :columns="columns" :data-source="test" class="list_body" :customRow="rowClick"
:rowClassName="setRowClassName" style="width:100%" @resizeColumn="handleResizeColumn">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'type'">
<EditType v-if="record.type === 'edit'" :hasEditHistory="true"></EditType>
<PkgReleaseType v-else></PkgReleaseType>
</template>
<template v-if="column.key === 'editFlag'">
<EditIcon :id="record.id" :name="record.name" :releaseVersion="record.releaseList" :editVersion="record.editVersion"
:editFlag="record.type === 'edit'" @updateList="getData()"></EditIcon>
</template>
</template>
</a-table>
</div>
const columns = ref<TableColumnsType>([
{ title: t('list.common.reportId'), dataIndex: 'id', key: 'id', width: 100, resizable: true, minWidth: 100 },
{ title: t('list.common.reportName'), dataIndex: 'name', key: 'name', ellipsis: true, resizable: true, minWidth: 100, width: 150 },
{ title: t('list.common.subSystem'), dataIndex: 'subSystem', key: 'subSystem', ellipsis: true, resizable: true, width: 150, minWidth: 100 },
{ title: t('list.common.version'), dataIndex: 'releaseVersion', key: 'releaseVersion', width: 150, minWidth: 100 ,maxWidth:150},
{ title: t('list.common.type'), dataIndex: 'type', key: 'type', width: 100 },
{ title: ' ', dataIndex: 'editFlag', key: 'editFlag', width: 100 }
]);
//This method is triggered when the column is dragged
const handleResizeColumn = (w: number, col: any) => {
var width = Number(columns.value[0].width) + Number(columns.value[1].width) + Number(columns.value[2].width) + Number(columns.value[3].width)
// console.log( " width:" + width)
if (col.key === 'id' || col.key === 'name' || col.key === 'subSystem') {
// console.log("When dragging column 1 or column 2 or column 3")
if (Number(columns.value[3].width) > 100) {
// console.log("Compress the fourth column")
col.width = w;
columns.value[3].width = width - Number(columns.value[0].width) - Number(columns.value[1].width) - Number(columns.value[2].width)
} else {
// console.log("Column 4 has been compressed to the limit.")
if ((col.key === 'name' || col.key === 'id') && Number(columns.value[2].width) > 100) {
// console.log("When dragging the 2nd or 1st column and the 3rd column is not compressed to the limit, compress the 3rd column")
col.width = w;
columns.value[2].width = width - Number(columns.value[0].width) - Number(columns.value[3].width) - Number(columns.value[1].width)
// console.log("Column 3 width: " + columns.value[2].width)
} else if (col.key === 'id' && Number(columns.value[1].width) > 100) {
// console.log("When dragging the first column and the second column is not compressed to the limit, compress the second column")
col.width = w;
columns.value[1].width = width - Number(columns.value[0].width) - Number(columns.value[3].width) - Number(columns.value[2].width)
}else if(col.key === 'subSystem'){
if(w < width - Number(columns.value[1].width) - Number(columns.value[3].width) - Number(columns.value[0].width)){
// console.log("When column 4 has been compressed to the limit, column 3 can only be reduced and cannot be enlarged")
col.width = w;
columns.value[3].width = width - Number(columns.value[0].width) - Number(columns.value[1].width) - w
}
}else if(col.key === 'name'){
if(w < width - Number(columns.value[2].width) - Number(columns.value[3].width) - Number(columns.value[0].width)){
// console.log("When the third column has been compressed to the limit, the second column can only be reduced and cannot be enlarged")
col.width = w;
columns.value[2].width = width - Number(columns.value[0].width) - Number(columns.value[3].width) - w
}
}else if (col.key === 'id'){
if(w < width - Number(columns.value[2].width) - Number(columns.value[3].width) - Number(columns.value[1].width)){
// console.log("When the second column has been compressed to the limit, the first column can only be reduced and cannot be enlarged")
col.width = w;
columns.value[1].width = width - Number(columns.value[2].width) - Number(columns.value[3].width) - w
}
}
}
}
if (width > 550) {
isHidden.value = true
} else {
isHidden.value = false
}
}
const table_show = ref()
var width = Number(columns.value[0].width) + Number(columns.value[1].width) +
Number(columns.value[2].width) + Number(columns.value[3].width) + Number(columns.value[4].width) + Number(columns.value[5].width)
const isEnlarge = ref<boolean>(false)
//Adjust the column width of the table according to the browser window, the first four columns change and the two columns are fixed
const windowResize = () => {
const tableWidth = table_show.value.clientWidth
// console.log("tableWidth"+tableWidth + "width" + width)
if (tableWidth <= width) {
if (!isEnlarge.value) {
if (columns.value[3].width && Number(columns.value[3].width) > 100) {
// console.log("Column 4 changed" + columns.value[3].width)
columns.value[3].width = tableWidth - Number(columns.value[0].width) - Number(columns.value[1].width) - Number(columns.value[2].width) - Number(columns.value[4].width) - Number(columns.value[5].width)
if(columns.value[3].width < 100){
columns.value[3].width = 100
}
}
if (Number(columns.value[2].width) > 100 && Number(columns.value[3].width) <= 100) {
// console.log("Column 3 changed" + columns.value[2].width)
columns.value[2].width = tableWidth - Number(columns.value[0].width) - Number(columns.value[1].width) - Number(columns.value[4].width) - Number(columns.value[5].width) - Number(columns.value[3].width)
if(columns.value[2].width < 100){
columns.value[2].width = 100
}
}
if (Number(columns.value[1].width) > 100 && Number(columns.value[2].width)<= 100) {
// console.log("Column 2 changed" + columns.value[1].width)
columns.value[1].width = tableWidth - Number(columns.value[0].width) - Number(columns.value[2].width) - Number(columns.value[3].width) - Number(columns.value[4].width) - Number(columns.value[5].width)
if(columns.value[1].width < 100){
columns.value[1].width = 100
}
}
if (Number(columns.value[0].width) > 100 && Number(columns.value[1].width)<= 100) {
// console.log("Column 1 changed" + columns.value[0].width)
columns.value[0].width = tableWidth - Number(columns.value[4].width) - Number(columns.value[5].width) - Number(columns.value[1].width) - Number(columns.value[2].width) - Number(columns.value[3].width)
}
}else if(isEnlarge.value){
if (columns.value[3].width && Number(columns.value[3].width) < 150) {
// console.log("Column 4 changed" + columns.value[3].width)
columns.value[3].width = tableWidth - Number(columns.value[0].width) - Number(columns.value[1].width) - Number(columns.value[2].width) - Number(columns.value[4].width) - Number(columns.value[5].width)
} else if (columns.value[2].width && Number(columns.value[2].width) < 150) {
// console.log("Column 3 changed" + columns.value[2].width)
columns.value[2].width = tableWidth - Number(columns.value[0].width) - Number(columns.value[1].width) - Number(columns.value[4].width) - Number(columns.value[5].width) - 150
} else if (columns.value[1].width && Number(columns.value[1].width) <150) {
// console.log("Column 2 changed" + columns.value[1].width)
columns.value[1].width = tableWidth - Number(columns.value[0].width) - Number(columns.value[4].width) - Number(columns.value[5].width) - 300
} else if (Number(columns.value[0].width) <100 && columns.value[0].width) {
// console.log("Column 1 changed" + columns.value[0].width)
columns.value[0].width = tableWidth - Number(columns.value[4].width) - Number(columns.value[5].width) - 450
}
}
}
// console.log("tableWidth:" + tableWidth + " width:" + width)
// console.log("The fourth column width: "+columns.value[3].width)
// console.log("Column 3 width: "+columns.value[2].width)
// console.log("Column 2 width: "+columns.value[1].width)
// console.log("Column 1 width: "+columns.value[0].width)
}
let prevWidth = ref<number>(window.innerWidth)
// This method is triggered when the browser window is dragged
window.onresize = () => {
const winWidth = window.innerWidth
if (winWidth > prevWidth.value) {
isEnlarge.value = true
} else if (winWidth < prevWidth.value) {
isEnlarge.value = false
}
windowResize()
prevWidth.value = winWidth
}
onMounted(() => {
windowResize()
})
//The style of the div on the outer layer of the table min-width is used to control the minimum value when the browser window changes
.table_show {
margin: 0 auto;
border: 1px solid #d7dadd;
border-radius: 12px;
width: 100%;
max-width: 814px;
min-width: 600px;
min-height: calc(100vh - 40px * 2 - 64px);
white-space: nowrap;
overflow: hidden;
}