<template>
<div class="page">
<el-table border style="width: 100%" :data="tableData">
<el-table-column
v-for="(item, index) in tableTitleList"
:key="index"
:label="item.label"
:type="item.type"
:prop="item.prop"
:align="item.align || 'center'"
:width="flexColumnWidth(item.label, item.prop)"
/>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableTitleList: [
{
label: "序号",
type: "index",
},
{
label: "姓名",
prop: "name",
},
{
label: "座右铭",
prop: "motto",
},
],
tableData: [
{
name: "李四",
motto: "人生没有白走的路,每一步都算数",
},
{
name: "王小二",
motto: "少壮不努力,老大徒伤悲",
},
{
name: "诸葛孔明",
motto:
"大事起于难,小事起于易,故欲思其利必虑其害,欲思其成必虑其败。",
},
],
};
},
methods: {
getMaxLength(arr) {
return arr.reduce((acc, item) => {
if (item) {
const calcLen = this.getTextWidth(item);
if (acc < calcLen) {
acc = calcLen;
}
}
return acc;
}, 0);
},
getTextWidth(str) {
let width = 0;
const html = document.createElement("span");
html.innerText = str;
html.className = "getTextWidth";
document.querySelector("body").appendChild(html);
width = document.querySelector(".getTextWidth").offsetWidth;
document.querySelector(".getTextWidth").remove();
return width;
},
flexColumnWidth(label, prop) {
// 1.获取该列的所有数据
const arr = this.tableData.map((x) => x[prop]);
arr.push(label); // 把每列的表头也加进去算
// 2.计算每列内容最大的宽度 + 表格的内间距(依据实际情况而定)
let maxLength = this.getMaxLength(arr);
return maxLength + 25 + "px";
},
},
};
</script>
<style scoped>
.page {
padding: 30px;
}
/* 表头字体加粗 */
::v-deep .el-table thead {
font-weight: 1000 !important;
}
</style>
Element UI 表格【列宽自适应】
猜你喜欢
转载自blog.csdn.net/weixin_41192489/article/details/130014620
今日推荐
周排行