• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
丶菜鸟也会飞
博客园    首页    新随笔    联系   管理    订阅  订阅
表格所有列自适应表格宽度,所有文字显示出来 不做隐藏
// 动态计算列宽(基于表头文字 + 单元格内容的最大宽度)
    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>

 

posted on 2025-05-07 15:59  丶菜鸟也要飞  阅读(28)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3