表格列宽自适应

src/assets/css/base.css

@@ -60,6 +60,7 @@ li {
 .el-table--mini td, .el-table--mini th{
 	padding: 3px 0;
 }
+
 /* button样式 */
 .el-button {
 	color: #5C5A5A;

src/main.js

@@ -10,7 +10,7 @@ import "./assets/css/base.css"
 import Pagination from '@/components/Pagination';
 import { getStanderOne } from "@/server/api.js"
 import { getColumnName } from '@/utils/allField.js'
-import { parseTime, resetForm } from '@/utils/costum'
+import { parseTime, resetForm, columnWidth } from '@/utils/costum'
 
 const app = createApp(App)
 app.use(store)
@@ -21,6 +21,7 @@ app.config.globalProperties.getStanderOne = getStanderOne
 app.config.globalProperties.getColumnName = getColumnName
 app.config.globalProperties.parseTime = parseTime
 app.config.globalProperties.resetForm = resetForm
+app.config.globalProperties.columnWidth = columnWidth
 app.config.globalProperties.msgSuccess = function (msg) {
 	this.$message({ showClose: true, message: msg, type: 'success' })
 }

src/mixins/ListMixin.js

@@ -11,6 +11,7 @@ export const ListMixin = {
 			},
 			dataList: [], // 表格数据
 			loading: true, // 表格loading加载
+			colWidthList:[]
 		}
 	},
 	created () {
@@ -25,7 +26,10 @@ export const ListMixin = {
 				if (res.code === 200) {
 					this.dataList = res.data.records || []
 					this.pagination.total = res.data.count
-					this.loading = false
+					this.$nextTick(()=>{
+						this.colWidthList = this.columnWidth(this.$refs['tableRef'].$el);
+						this.loading = false;
+					})
 				} else {
 					this.loading = false
 				}

src/utils/costum.js

@@ -60,3 +60,40 @@ export function praseStrEmpty (str) {
 	}
 	return str
 }
+
+// 表格列宽自适应
+export function columnWidth (el) {
+	let widthList = [];
+	let thWidthList = [];
+	// 计算表头宽度
+	el.querySelectorAll('.has-gutter tr').forEach((tr) => {
+		tr.querySelectorAll('th').forEach((th, i) => {
+			console.log(th.lastChild.innerText, th.lastChild.innerText.length*16+20);
+			if(th.lastChild.innerText && th.lastChild.innerText.length){
+				if(thWidthList[i] && thWidthList[i].push){
+					thWidthList[i].push(th.lastChild.innerText.length*16+20);
+				}else{
+					thWidthList[i]=[];
+					thWidthList[i].push(th.lastChild.innerText.length*16+20);
+				}
+			}
+    });
+	})
+	// 计算内容宽度
+  el.querySelectorAll('.el-table__body tr').forEach((tr) => {
+    tr.querySelectorAll('td').forEach((td, i) => {
+			if(td.lastChild.innerText && td.lastChild.innerText.length){
+				if(widthList[i] && widthList[i].push){
+					widthList[i].push(td.lastChild.innerText.length*14+20);
+					widthList[i].push(thWidthList[i]);
+				}else{
+					widthList[i]=[];
+					widthList[i].push(td.lastChild.innerText.length*14+20);
+					widthList[i].push(thWidthList[i]);
+				}
+			}
+    });
+  });
+	console.log(11111111111);
+  return widthList.map(width => Math.max(...width));
+}

src/views/etl/index.vue

@@ -22,8 +22,8 @@
 		</SearchTemplate>
 		<!-- 页面主题容器 -->
 		<ContentContainer>
-			<el-table :data="dataList" v-loading="loading" size="mini" style="width: 100%" border>
-				<el-table-column v-for="(item, index) in headers" :key="index" :label="getColumnName(item)" :show-overflow-tooltip="true" width="200">
+			<el-table :data="dataList" ref="tableRef" v-loading="loading" size="mini" style="width: 100%" border>
+				<el-table-column v-for="(item, index) in headers" :key="index" :label="getColumnName(item)" show-overflow-tooltip :min-width="colWidthList[index]">
 					<template #default="scope">
 						<span v-if="item === 'TaskHead-LastModify' || item === 'TaskHead-CreateTime'">{{ parseTime(scope.row[item]) }}</span>
 						<span v-else-if="item === 'TaskHead-Status'">{{orderTypeTrans(scope.row[item])}}</span>

src/views/etlDB/index.vue

@@ -18,8 +18,8 @@
 		</SearchTemplate>
 		<!-- 页面主题容器 -->
 		<ContentContainer>
-			<el-table :data="dataList" v-loading="loading" size="mini" style="width: 100%" border>
-				<el-table-column v-for="(item, index) in headers" :key="index" :label="getColumnName(item)" :show-overflow-tooltip="true" width="170">
+			<el-table :data="dataList" ref="tableRef" v-loading="loading" fit size="mini" style="width: 100%" border>
+				<el-table-column :label="getColumnName(item)" v-for="(item, index) in headers" :key="item" show-overflow-tooltip :min-width="colWidthList[index]">
 					<template #default="scope">
 						<span v-if="item === 'DB-LastModify' || item === 'DB-CreateTime'">{{ parseTime(scope.row[item]) }}</span>
 						<span v-else>{{ scope.row[item] }}</span>
@@ -70,7 +70,7 @@
 				], // 遍历表头
 				url: {
 					queryListUrl: "/admin/etl/database/query"  // 查询分页列表接口
-				},
+				}
 			}
 		},
 		methods: {

src/views/field/index.vue

@@ -22,14 +22,14 @@
 		</SearchTemplate>
 		<!-- 页面主题容器 -->
 		<ContentContainer>
-			<el-table :data="dataList" v-loading="loading" size="mini" style="width: 100%" border>
-				<el-table-column v-for="(item, index) in headers" :key="index" :label="getColumnName(item)" :show-overflow-tooltip="true">
+			<el-table :data="dataList" v-loading="loading" size="mini" style="width: 100%" border ref="tableRef">
+				<el-table-column v-for="(item, index) in headers" :key="index" :label="getColumnName(item)" show-overflow-tooltip :min-width="colWidthList[index]">
 					<template #default="scope">
 						<span v-if="item === 'TabColName-LastModify' || item === 'TabColName-CreateTime'">{{ parseTime(scope.row[item]) }}</span>
 						<span v-else>{{ scope.row[item] }}</span>
 					</template>
 				</el-table-column>
-				<el-table-column label="操作" width="180">
+				<el-table-column label="操作" width="180" fixed="right">
 					<template #default="scope">
 						<el-button class="edit-button-style" @click="handleUpdate(scope.row)" icon="el-icon-edit" size="small">修改</el-button>
 						<el-button class="edit-button-style" @click="handleDelete(scope.row)" icon="el-icon-delete" size="small">删除</el-button>

src/views/oneimport/index.vue

@@ -18,14 +18,14 @@
 		</SearchTemplate>
 		<!-- 页面主题容器 -->
 		<ContentContainer>
-			<el-table :data="dataList" v-loading="loading" size="mini" style="width: 100%" border>
-				<el-table-column v-for="(item, index) in headers" :key="index" :label="getColumnName(item)" :show-overflow-tooltip="true">
+			<el-table :data="dataList" v-loading="loading" size="mini" style="width: 100%" border ref="tableRef">
+				<el-table-column v-for="(item, index) in headers" :key="index" :label="getColumnName(item)" show-overflow-tooltip :min-width="colWidthList[index]">
 					<template #default="scope">
 						<span v-if="item === 'TaskHead-LastModify' || item === 'TaskHead-CreateTime'">{{ parseTime(scope.row[item]) }}</span>
 						<span v-else>{{ scope.row[item] }}</span>
 					</template>
 				</el-table-column>
-				<el-table-column label="操作" width="340">
+				<el-table-column label="操作" width="340" fixed="right">
 					<template #default="scope">
 						<el-button class="edit-button-style" @click="configuration(scope.row)" icon="el-icon-setting" size="small">配置</el-button>
 						<el-button class="edit-button-style" @click="handleUpdate(scope.row)" icon="el-icon-edit" size="small">修改</el-button>

src/views/record/index.vue

@@ -63,8 +63,8 @@
 		</SearchTemplate>
 		<!-- 页面主题容器 -->
 		<ContentContainer>
-			<el-table :data="dataList" v-loading="loading" size="mini" style="width: 100%" border>
-				<el-table-column v-for="(item, index) in headers" :key="index" :label="getColumnName(item)" :show-overflow-tooltip="true" width="170">
+			<el-table :data="dataList" v-loading="loading" size="mini" style="width: 100%" border ref="tableRef">
+				<el-table-column v-for="(item, index) in headers" :key="index" :label="getColumnName(item)" show-overflow-tooltip :min-width="colWidthList[index]">
 					<template #default="scope">
 						<span v-if="item === 'DB-LastModify' || item === 'DB-CreateTime'">{{ parseTime(scope.row[item]) }}</span>
 						<span v-else>{{ scope.row[item] }}</span>
@@ -118,6 +118,7 @@
 					queryListUrl: "/admin/etl/record/query"  // 查询分页列表接口
 				},
 				etlListArray: [], // etl任务数组
+				colWidthList:[]
 			}
 		},
 		created() {
@@ -144,7 +145,10 @@
 					if (res.code === 200) {
 						this.dataList = res.data.records || []
 						this.pagination.total = res.data.count
-						this.loading = false
+						this.$nextTick(()=>{
+							this.colWidthList = this.columnWidth(this.$refs['tableRef'].$el);
+							this.loading = false;
+						})
 					} else {
 						this.loading = false
 					}

src/views/standard/index.vue

@@ -18,14 +18,14 @@
 		</SearchTemplate>
 		<!-- 页面主题容器 -->
 		<ContentContainer>
-			<el-table :data="dataList" v-loading="loading" size="mini" style="width: 100%" border>
-				<el-table-column v-for="(item, index) in headers" :key="index" :label="getColumnName(item)" :show-overflow-tooltip="true">
+			<el-table :data="dataList" v-loading="loading" size="mini" style="width: 100%" border ref="tableRef">
+				<el-table-column v-for="(item, index) in headers" :key="index" :label="getColumnName(item)" show-overflow-tooltip :min-width="colWidthList[index]">
 					<template #default="scope">
 						<span v-if="item === 'Stdef-LastModify' || item === 'Stdef-CreateTime'">{{ parseTime(scope.row[item]) }}</span>
 						<span v-else>{{ scope.row[item] }}</span>
 					</template>
 				</el-table-column>
-				<el-table-column label="操作" width="180">
+				<el-table-column label="操作" width="180" fixed="right">
 					<template #default="scope">
 						<el-button class="edit-button-style" @click="handleUpdate(scope.row)" icon="el-icon-edit" size="small">修改</el-button>
 						<el-button class="edit-button-style" @click="handleDelete(scope.row)" icon="el-icon-delete" size="small">删除</el-button>