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

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

鸭不是鸭

2003人浏览 · 2023-06-13 15:51:15

鸭不是鸭 · 2023-06-13 15:51:15 发布

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

}

GitHub 加速计划 / vu / vue

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：4 个月前 )

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前

e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m