// 动态计算列宽(基于表头文字 + 单元格内容的最大宽度)
calculateColumnWidth(column, tableData) {
let contentList = tableData.map(row => {
return String(row[column.CODE] || '')
});
contentList = contentList.filter(item => item !== null && item !== undefined && item != '')
const maxContentLength = Math.max(
...contentList.map(text => this.getDisplayLength(text)),
this.getDisplayLength(column.LABEL) // 表头文字长度
);
// 按字符数计算宽度(1中文字符≈2英文字符,8px 是单个字符的大致宽度)
return `${maxContentLength * 8 + 30}px`; // 加 30px 作为边距
},
getDisplayLength(str) {
let length = 0;
for (const char of str) {
// 中文、日文、韩文等宽字符算 2 个单位
length += /[\u4e00-\u9fa5\u3040-\u30ff\uac00-\ud7af]/.test(char) ? 2 : 1;
}
return length;
},
<div class="stm-table-content" style="width: 100%; overflow-x: auto;">
<el-table
:ref="tableName"
:computed_sub_table_data="computedSubTableData"
:data="table_data"
:border="border"
:show-summary="showSummary"
:summary-method="summaryMethod"
:span-method="spanMethod"
:show-header="showHeader"
:stripe="showStripe"
:highlight-current-row="highlightCurrentRow"
tooltip-effect="light"
:row-class-name="rowClassName"
:row-style="rowStyle"
:cell-style="cellStyle"
:header-row-style="headerRowStyle"
header-row-class-name="header-row"
:expand-row-keys="expandRowKeys"
:row-key="getRowKey"
@sort-change="handleSortChange"
@row-click="handleRowClick"
@cell-click="handleCellClick"
@row-dblclick="handleRowDbClick"
@expand-change="handleExpandChange"
>
<el-table-column v-for="(column, index) in tableColumn"
:key="column[CODE]"
:prop="column[CODE]"
:label="column[LABEL]"
:label-class-name="column.REQUIRED ? 'is-required' : ''"
:class-name="column[CODE] + (column.TIPS ? ' tooltips' : '')"
:min-width="calculateColumnWidth(column, table_data)"
:width="null"
:fixed="column.FIXED"
:show-overflow-tooltip="false"
:sortable="sortFlagFun(column)"
align="center"
:resizable="true">
<!-- 表单表头插槽 -->
<template slot="header">
<slot :name="`${column[CODE]}-header`" :column="column">{{column[LABEL]}}</slot>
</template>
</table-column>