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