- 需求:vue使用el-table时有些单元格内容比较长,希望可以不换行全部显示;
- 思路:根据返回数据宽度,动态设置表格最大宽度;
- 最终效果:
![](https://i-blog.csdnimg.cn/blog_migrate/645ea82d67cdc6e7823381096a6c4a9f.png)
<el-table
:data="tableData"
style="width: 100%">
<el-table-column prop="date" label="日期" width="150"> </el-table-column>
<el-table-column prop="name" label="姓名" width="150"> </el-table-column>
<el-table-column prop="sex" label="性别" width="130"> </el-table-column>
<el-table-column prop="age" label="年龄" width="120"> </el-table-column>
<el-table-column
prop="address"
label="地址"
:width="flexColumnWidth(list, 'address')"
>
</el-table-column>
</el-table>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
// 自适应表格列宽
flexColumnWidth(arr1, name, flag = "max") {
// name为该列的字段名(传字符串);arr1为该表格的数据源(传变量);
// flag为可选值,可不传该参数,传参时可选'max'或'equal',默认为'max'
// flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
let columnContent = "";
if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {
return "80px"; // 给个默认的
}
if (flag === "equal") {
// 获取该列中第一个不为空的数据(内容)
for (let i = 0; i < arr1.length; i++) {
if (arr1[i][name].length > 0) {
columnContent = arr1[i][name];
break;
}
}
} else {
// 获取该列中最长的数据(内容)
let index = 0;
for (let i = 0; i < arr1.length; i++) {
if (arr1[i][name] === null) {
return;
}
if (arr1[i][name] === undefined) {
//字段没有时默认数据为空
arr1[i][name] = "";
}
const now_temp = arr1[i][name] + "";
const max_temp = arr1[index][name] + "";
if (now_temp.length > max_temp.length) {
index = i;
}
}
columnContent = arr1[index][name];
}
// console.log('该列数据[i]:', columnContent)
// 以下分配的单位长度可根据实际需求进行调整
let flexWidth = 0;
for (const char of columnContent) {
if ((char >= "A" && char <= "Z") || (char >= "a" && char <= "z")) {
// 如果是英文字符,为字符分配8个单位宽度
flexWidth += 8;
} else if (char >= "\u4e00" && char <= "\u9fa5") {
// 如果是中文字符,为字符分配15个单位宽度
flexWidth += 15;
} else {
// 其他种类字符,为字符分配8个单位宽度
flexWidth += 8;
}
}
if (flexWidth < 80) {
// 设置最小宽度
flexWidth = 80;
}
// if (flexWidth > 250) {
// // 设置最大宽度
// flexWidth = 250
// }
//留边距
flexWidth += 20;
return flexWidth;
},
}
}
</script>