image.png
image.png
<el-table-column
label="本次核销金额"
align="right"
prop="writeOffAmount"
:min-width="flexColumnWidth('本次核销金额', 'writeOffAmount', unverifiedTableData)"
/>
<el-table-column
v-for="(col, index) in tableColumns.activeFields"
:key="index"
:prop="col.prop"
:label="col.label"
:width="col.width"
:min-width="flexColumnWidth(col.label, col.prop, msgList) "
:show-overflow-tooltip="col.showOverflowTooltip !== 'hidden'"
:align="col.align"
:sortable="col.sortable">
import { flexColumnWidth } from 'flexColumnWidth.js';
// 函数用于计算给定字符串在页面上的显示宽度，并放大一定比例以适应布局需求
export function getTextWidth(str) {
let width = 0;
// 创建一个 span 元素用于测量文本宽度
const html = document.createElement('span');
html.innerText = str;
html.className = 'getTextWidth';
// 将 span 元素添加到 body 中以便获取其宽度
document.querySelector('body').appendChild(html);
// 获取 span 的宽度并放大 20%
width = document.querySelector('.getTextWidth').offsetWidth * 1.2;
// 移除 span 元素
document.querySelector('.getTextWidth').remove();
// 返回计算后的宽度
return width;
}
// 动态计算列宽
export function flexColumnWidth(label, prop, data, padding = 48) {
// 从数据集中提取指定属性的值
const arr = data.map((x) => x[prop]);
// 添加标签作为最后一项进行比较
arr.push(label);
// 计算所有项的最大宽度
const maxWidth = arr.reduce((acc, item) => {
if (item) {
// 调用 getTextWidth 函数获取每个项的显示宽度
const width = getTextWidth(item);
// 更新最大宽度
acc = Math.max(acc, width);
}
// 返回当前最大宽度
return acc;
}, 0);
// 返回最大宽度加上额外的内间距
return maxWidth + padding + 'px';
}
