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

 表格html片段

  <section class="w-full h-786 overflow-auto">
              <div class="right-table">
                <el-table
                  v-loading="loading"
                  stripe
                  size="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 }">
                        <!-- 优先级备注 -->
                        <div
                          v-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-pagination
                  v-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-pagination
                  v-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) {
    // 表头字符长度大于1
    return chi.length * size * 2 + eng.length * size*2 + num.length * 2 * size 
  } 
  else{
    // 表头字符长度小于等于1，可能还是会出现宽度不够的情况，适当加宽
    return chi.length * size * 3 
  }
}