:render-header="renderHeader"
javascript
<el-table
class="cx-table cxTable"
:data="defaultArray"
style="width: 100%"
header-align="left"
tooltip-effect="dark"
:height="minheight"
@sort-change="sortChange"
ref="multipleTable"
v-loading="listLoading"
element-loading-text="拼命处理中,请勿其他操作"
>
<!-- 可筛选配置项 添加一层循环 -->
<template v-for="(item, index) in headName">
<el-table-column
v-if="true"
:key="index"
showOverflowTooltip
:prop="item.prop"
:label="item.label"
:min-width="item.width"
:render-header="renderHeader">
<template slot-scope="scope">
<slot
v-if="item.slot"
:name="scope.column.property"
:row="scope.row"
:$index="scope.$index"
><span
class="clickColumn"
@click="handleVerify(scope.row, 'view')"
>{{ scope.row[scope.column.property] }}</span
></slot>
<span v-else>{{ scope.row[scope.column.property] }}</span>
</template>
</el-table-column>
</template>
<el-table-column
:label="$t('A1000420')"
cxdesc="操作"
:showOverflowTooltip="true"
min-width="200">
<template slot-scope="scope">
<el-button
@click.native="handleVerify(scope.row, 'view')"
type="text"
>是小狐狸呀详情页</el-button>
</template>
</el-table-column>
</el-table>methods里加上方法renderHeader
javascript
// 表头部重新渲染
renderHeader(h, { column, $index }) {
console.log(column, $index);
// 新建一个 span
let span = document.createElement("span");
// 设置表头名称
span.innerText = column.label;
// 临时插入 document
document.body.appendChild(span);
// 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
if ($index == 0) {
column.minWidth = span.getBoundingClientRect().width + 140;
} else if ($index == 1) {
column.minWidth = span.getBoundingClientRect().width + 240;
} else {
column.minWidth = span.getBoundingClientRect().width + 60;
}
// 移除 document 中临时的 span
document.body.removeChild(span);
return h("span", column.label);
},