// 动态计算列宽(基于表头文字 + 单元格内容的最大宽度) 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>
浙公网安备 33010602011771号