From 2ef441b6055c6a21b5feffa1d9c86c342d299006 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Mon, 27 Mar 2023 18:46:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=88=86=E8=BE=A8?=
 =?UTF-8?q?=E7=8E=87=E8=BF=87=E5=B0=8F=E6=97=B6=EF=BC=8C=E8=A1=A8=E5=A4=B4?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E6=8D=A2=E8=A1=8C=E5=AF=BC=E8=87=B4=E5=8D=95?=
 =?UTF-8?q?=E8=AF=8D=E8=A2=AB=E6=8B=86=E5=BC=80=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mixins/table.js | 53 ++++++++++++++++++++++++++++++++++++++++++++-
 src/utils/tools.js  | 14 ++++++++++++
 2 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/src/mixins/table.js b/src/mixins/table.js
index 3de60111..fc9d6887 100644
--- a/src/mixins/table.js
+++ b/src/mixins/table.js
@@ -1,4 +1,5 @@
-import { chartTableOrderOptionsMapping } from '@/utils/constants'
+import { chartTableOrderOptionsMapping, storageKey } from '@/utils/constants'
+import { getWidthByLanguage } from '@/utils/tools'
 export default {
   props: {
     tableData: {
@@ -20,6 +21,10 @@ export default {
   },
   computed: {
     customTableTitles () {
+      if (this.customTableTitle) {
+        this.getTableWidth(this.customTableTitle)
+      }
+
       return this.customTableTitle.filter(item => item.show)
     }
   },
@@ -39,6 +44,52 @@ export default {
     }
   },
   methods: {
+    getTableWidth (list) {
+      if (list && list.length > 0) {
+        const language = localStorage.getItem(storageKey.language)
+        // 文字所占宽度，一个英文字母占7px，中文16px
+        let num = getWidthByLanguage(language) || 7
+        if (language !== 'cn') {
+          num = num + 1 // 最后一位加空格
+        }
+
+        list.forEach((item, index) => {
+          if (item.label) {
+            let tempLength = 0
+
+            if (item.label.indexOf(' ') > -1) {
+              let tempArr = []
+              tempArr = item.label.split(' ')
+              tempLength = Math.max(...tempArr.map(el => el.length))
+            } else {
+              tempLength = item.label.length
+            }
+
+            // 宽度 = 最小不可拆分单词文字宽度 + 22的padding边距
+            const newWidth = (num * tempLength) + 22
+
+            // 为了避免没有minWidth这种情况
+            if (!item.minWidth) {
+              item.minWidth = newWidth
+            } else if (item.minWidth < newWidth) {
+              item.minWidth = newWidth
+            }
+
+            // 排序最后一位一般是'操作'，或者是较长的字符，故不让其换行，宽度直接为字符宽度
+            if (index === list.length - 1) {
+              item.minWidth = (num * item.label.length) + 22
+              item.width = (num * item.label.length) + 22
+            }
+
+            // 有排序的，额外添加24px的排序图标宽度
+            if (item.sortable) {
+              item.minWidth = item.minWidth + 30
+              item.width = item.width + 30
+            }
+          }
+        })
+      }
+    },
     tableOperation ([command, row]) {
       switch (command) {
         default:
diff --git a/src/utils/tools.js b/src/utils/tools.js
index d476c7f2..4ce5f31b 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -1239,3 +1239,17 @@ export function getQueryByFlag2 (type, condition) {
     }
   }
 }
+
+/**
+ 根据语言环境获取字符所占像素px
+ */
+export function getWidthByLanguage (language) {
+  switch (language) {
+    case 'en': {
+      return 7
+    }
+    case 'cn': {
+      return 16
+    }
+  }
+}