在做表格的时候,设置好的列宽却因为数据太长导致换行,想让它自己调整宽度,但是现在elementUI组件好像还没有这个功能。所以自己写了一个方法实现它。
一个动态改变表格列宽的方法
该方法实现了自适应列内容长度不换行,另外改变字体大小也会改变列宽,也实现了自适应字体大小列宽调整。
这个方法的思路是将列数据拆成单个字母或者单个中文字或其他单个符号放入数组中,对不同类型设置不同宽度,接着算出所有列数据的宽度,取最大宽度的一个设置为表格列宽。
- 自动调节表格列宽 :flexColumnWidth ,返回值为宽度值,只有数字没有单位
- title:表列名 (例:‘名字’,‘性别’,‘手机号码’)
- tableData:表格数据
- str:字段名 (例:tableData[0].name 中的’name’, tableData[0].phone,的’phone’,
- currentfontsz:当前字体尺寸(填数字就好)
- sizetype:字体尺寸的单位(是px还是rem)
flexColumnWidth(
title,
str,
tableData,
currentfontsz,
sizetype,
flag = "max"
) {
//可能tableData里面的是个object对象,把它里面的name取出来替换它,传参时只需传对象名就好了。
if (tableData == null) return;
let tb = JSON.parse(JSON.stringify(tableData));
for (let i = 0; i < tb.length; i++) {
if (typeof tb[i][str] == "object") {
tb[i][str] = tb[i][str].name;
}
}
//外部字体尺寸变化的时候,这里进行了适配,以求宽度会随着字体尺寸变化而动态调整
let