Vue + ElementUI el-table动态生成表格(表头含有中文 英文 数字等) 表头宽度自适应实现

表格html片段

<section class="w-full h-786 overflow-auto"><div class="right-table"><el-tablev-loading="loading"stripesize="small"ref="multipleTableRef":data="totalData.tableData":default-sort="{ prop: 'ModifyTime', order: 'descending' }"height="100%"class="manage-report-table"fit><template v-for="(item, index) in totalData.tableHeader" :key="index"><el-table-column :prop="item.key" :label="item.value" show-overflow-tooltip min-width="80" sortable :width="headSpanFit(item.value)"><template v-slot="{ row }"><!-- 优先级备注 --><divv-if="item.key == 'priority_remake'":class="['one-line','text-ellipsis',row.priority_level == 3 ? 'level-red' : row.priority_level == 2 ? 'level-orange' : row.priority_level == 1 ? 'level-green' : '',]">{{ row.priority_remake }}</div><!-- 状态 --><!-- <div class="complete-state text-ellipsis" v-else-if="item.key == 'test_state'">{{ '完成' }}</div> --><span :class="stateClass[row.test_state]" v-else-if="item.key == 'test_state'"><app-svg-icon class="mr-4 w-20 h-20" v-if="row.test_state === 1" iconName="icon-flash-sm"> </app-svg-icon>{{ formatTestState(row) }}</span><div v-else class="text-ellipsis">{{ row[item.key] }}</div></template></el-table-column></template></el-table></div><!-- 分页 --><div class="pagination-block py-12 flex justify-between overflow-x-auto shadow bg-white border"><el-paginationv-model:current-page="currentPage"v-model:page-size="pageSize":page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]":small="small":disabled="disabled":background="background"layout="sizes":total="totalData.total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/><el-paginationv-model:current-page="currentPage"v-model:page-size="pageSize":page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]":small="small":disabled="disabled":background="background"layout="total, prev, pager, next, jumper":total="totalData.total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div></section>

第一步：直接在el-table-column上面绑定动态宽度:width="headSpanFit(item.value)" 传label值

第二步：headSpanFit方法

function headSpanFit(label: any) {let chi = label.replace(/[^\u4E00-\u9FA5]/g, '') //中文let eng = label.replace(/[^a-zA-Z]/g, '') //英文let num = label.replace(/[^\d]/g, '') //数字let size = 20 // 根据需要定义标尺，直接使用字体大小确定就行，也可以根据需要定义//根据表头字符的不同设置长度if (label.length > 1) {// 表头字符长度大于1return chi.length * size * 2 + eng.length * size*2 + num.length * 2 * size } else{// 表头字符长度小于等于1，可能还是会出现宽度不够的情况，适当加宽return chi.length * size * 3 }}