表头根据文字长短自适应宽度

效果图

自是.png

在methods定义自适应方法

renderHeader (h, { column, $index }) { // 表头部重新渲染
    const span = document.createElement('span');// 新建一个 span
    span.innerText = column.label;// 设置表头名称
    document.body.appendChild(span);// 临时插入 document
    // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
    column.minWidth = span.getBoundingClientRect().width + 30;
    document.body.removeChild(span);// 移除 document 中临时的 span
    return h('span', column.label);
}

在文件中使用

<el-table :data="Hardware_List">
    <el-table-column
        v-for="(col, index) in Hardware_tableColumns"
        :key="index"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        :show-overflow-tooltip="true"
        :formatter="col.formatter"
        v-bind="col"
        :render-header="renderHeader">
    </el-table-column>
</el-table>