fix: 修复分辨率过小时,表头文字换行导致单词被拆开的问题

This commit is contained in:
刘洪洪
2023-03-27 18:46:00 +08:00
parent 1c39ea66ad
commit 2ef441b605
2 changed files with 66 additions and 1 deletions

View File

@@ -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:

View File

@@ -1239,3 +1239,17 @@ export function getQueryByFlag2 (type, condition) {
}
}
}
/**
根据语言环境获取字符所占像素px
*/
export function getWidthByLanguage (language) {
switch (language) {
case 'en': {
return 7
}
case 'cn': {
return 16
}
}
}