ant design vue a-table 列拖拽后两列固定前四列可拖动

<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 }

]);

//列拖拽时触发该方法

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("拖动第1列或者第2列或第三列时")

if (Number(columns.value[3].width) > 100) {

// console.log("压缩第四列")

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("第4列已经压缩到极限了。")

if ((col.key === 'name' || col.key === 'id') && Number(columns.value[2].width) > 100) {

// console.log("拖动第2列或第1列且第3列没有压缩到极限时，压缩第3列")

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("第3列宽度：" + columns.value[2].width)

} else if (col.key === 'id' && Number(columns.value[1].width) > 100) {

// console.log("拖动第1列且第2列没有压缩到极限时，压缩第2列")

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("第4列已经压缩到极限时，第3列只能缩小，不能再拉大")

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("第3列已经压缩到极限时，第2列只能缩小，不能再拉大")

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("第2列已经压缩到极限时，第1列只能缩小，不能再拉大")

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)

//根据浏览器窗口调整表格的列宽前四列变化后两列固定

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("第4列改变" + 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("第3列改变" + 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("第2列改变" + 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("第1列改变" + 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("第4列改变" + 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("第3列改变" + 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("第2列改变" + 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("第1列改变" + 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("第四列宽度："+columns.value[3].width)

// console.log("第3列宽度："+columns.value[2].width)

// console.log("第2列宽度："+columns.value[1].width)

// console.log("第1列宽度："+columns.value[0].width)

}

let prevWidth = ref<number>(window.innerWidth)

//拖动浏览器窗口时触发该方法

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()

})

//表格外层的div的样式 min-width用于控制浏览器窗口变化时的最小值

.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;

}

ant design vue a-table 列拖拽 后两列固定 前四列可拖动

悦读

ant design vue a-table 列拖拽后两列固定前四列可拖动