From 2cef98ed8a2e10cc9fe1cfc1638707f6e81b61cf Mon Sep 17 00:00:00 2001 From: liwei Date: Mon, 20 Dec 2021 16:28:47 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=88=97=E5=AE=BD=E8=87=AA?= =?UTF-8?q?=E9=80=82=E5=BA=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/base.css | 1 + src/main.js | 3 ++- src/mixins/ListMixin.js | 6 +++++- src/utils/costum.js | 37 +++++++++++++++++++++++++++++++++++ src/views/etl/index.vue | 4 ++-- src/views/etlDB/index.vue | 6 +++--- src/views/field/index.vue | 6 +++--- src/views/oneimport/index.vue | 6 +++--- src/views/record/index.vue | 10 +++++++--- src/views/standard/index.vue | 6 +++--- 10 files changed, 66 insertions(+), 19 deletions(-) diff --git a/src/assets/css/base.css b/src/assets/css/base.css index bb783fd..e15669c 100644 --- a/src/assets/css/base.css +++ b/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; diff --git a/src/main.js b/src/main.js index d8bcecf..9465275 100644 --- a/src/main.js +++ b/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' }) } diff --git a/src/mixins/ListMixin.js b/src/mixins/ListMixin.js index 681c00a..781819c 100644 --- a/src/mixins/ListMixin.js +++ b/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 } diff --git a/src/utils/costum.js b/src/utils/costum.js index c5c651f..cd711bf 100644 --- a/src/utils/costum.js +++ b/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)); +} diff --git a/src/views/etl/index.vue b/src/views/etl/index.vue index 107f283..ff63b7e 100644 --- a/src/views/etl/index.vue +++ b/src/views/etl/index.vue @@ -22,8 +22,8 @@ - - + +