// el-table 列数据
data(){
return{
tableColumn : [
{
label: "物料名称",
prop: "materialName",
width: 150
},
{
label: "色名",
prop: "colorName",
width: 150
},
]
}
},
// 获取列宽度 tableData: 接口返回表格数据,label: 表头名字,columnKey: 列表对应字段
getColumnWidth(tableData,label,columnKey){
const arr = tableData.map(x => x[columnKey])
arr.push(label) // 把每列的表头也加进去算
// 获取列中最长的字符长度
let text = this.findLongestElement(arr)
const chineseLeg = this.countCharacters(text).chineseCount || 0
const digitLeg = this.countCharacters(text).digitCount || 0
const englishLeg = this.countCharacters(text).englishCount || 0
// 根据字符长度设置列宽,可以根据具体需求进行调整
const maxLength = (chineseLeg * 14) + (digitLeg * 9) + (englishLeg * 12) ;
const minWidth = 90; // 最小列宽
const padding = 30; // 额外的内边距
return `${Math.max(minWidth, maxLength + padding)}px`;
},
// 获取最长字符有多少汉字/数字/英文
countCharacters(str) {
const chinesePattern = /[\u4e00-\u9fa5]/g; // 匹配汉字的正则表达式
const digitPattern = /\d/g; // 匹配数字的正则表达式
const englishPattern = /[a-zA-Z]/g; // 匹配英文字符的正则表达式
const chineseCount = (str.match(chinesePattern) || []).length;
const digitCount = (str.match(digitPattern) || []).length;
const englishCount = (str.match(englishPattern) || []).length;
return { chineseCount, digitCount, englishCount };
},
// 获取最长的一个字符
findLongestElement(arr) {
if (arr.length === 0) {
return null; // 如果数组为空,返回null或者其他适当的值
}
// 使用 reduce 方法找到最长的元素
const longestElement = arr.reduce((longest, current) => {
if (String(current).length == String(longest).length) { // 如果长度相等 选取汉字多的字符为标准
const chineseLeg = this.countCharacters(String(current)).chineseCount || 0
const chineseLeg2 = this.countCharacters(String(longest)).chineseCount || 0
return chineseLeg2 < chineseLeg ? String(current) : String(longest);
} else {
return String(current).length > String(longest).length ? String(current) : String(longest);
}
}, arr[0]);
return longestElement;
}
// 使用
this.tableColumn.forEach(item => {
item.width = this.getColumnWidth(res.data.records,item.label,item.prop)
})
表格列宽自适应
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 前言 对于动态获取数据的表格,如果期望单元格内容不折行,就要设定足够的宽度,同时又希望表格内容尽量紧凑,但是,由于...
- 由于项目的需求规定表格中的内容超出部分不能悬浮显示,要自适应宽,先element 表格的是不支持自适应的,经过搜索...
- 两种方法:方法一、计算文本内容宽度,遍历第一行数据,取最宽的值,设置width属性计算文本有两种方法计算方法1,使...
- template data methods 原文链接:https://blog.csdn.net/qq_33235...
- 在<nz-table>标签加上拖拽指令tableColumnWidthDrag即可生效, 注意必须包含 标签, ...