elementUI表格table表头不换行,自适应表头宽度

: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);
		},
相关推荐
bmxy小明同学11 小时前
2026-10-11-幻觉治理
服务器·前端·javascript
m0_5873830011 小时前
无人自助拼豆系统落地开发实战指南 核心逻辑实现与部署经验分享
前端·javascript·vue.js·人工智能·经验分享·需求分析
zhaiyy11 小时前
HTML Popover API 实践
前端·javascript·html
OpsEye12 小时前
企业 AI 管理新需求:不仅要接入模型,还要看懂每一次调用
javascript·ai编程
牧艺12 小时前
SPA 也能像原生 App:View Transitions API 从原理到可上线实战
前端·javascript·css
Dovis(誓平步青云)12 小时前
现场问题先关闭还是先验收,建筑任务怎样处理依赖
前端·javascript·数据库·mysql·音视频
用户842981424181012 小时前
压缩 ≠ 加密:前端代码保护的三层实践与踩坑记录
前端·javascript
.Hypocritical.13 小时前
SpringBoot+Vue 前后端分离项目部署到云服务器
服务器·vue.js·spring boot
怕浪猫13 小时前
12个UI组件库,Star最低的下载最多
前端·javascript·面试
溪语流沙13 小时前
【Web全栈进阶】Vue3起步:组件、模板语法、响应式数据
前端·javascript·vue.js·css3