fix: 修复分辨率过小时,表头文字换行导致单词被拆开的问题
This commit is contained in:
@@ -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:
|
||||
|
||||
@@ -1239,3 +1239,17 @@ export function getQueryByFlag2 (type, condition) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
根据语言环境获取字符所占像素px
|
||||
*/
|
||||
export function getWidthByLanguage (language) {
|
||||
switch (language) {
|
||||
case 'en': {
|
||||
return 7
|
||||
}
|
||||
case 'cn': {
|
||||
return 16
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user