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);
		},
相关推荐
callJJ9 小时前
MCP配置与实战:深入理解现代开发工具链
javascript·node.js·vue·mcp·windsurf
Van_Moonlight10 小时前
RN for OpenHarmony 实战 TodoList 项目:已完成未完成数量显示
javascript·开源·harmonyos
计算机学姐10 小时前
基于SpringBoot的汉服租赁系统【颜色尺码套装+个性化推荐算法+数据可视化统计】
java·vue.js·spring boot·后端·mysql·信息可视化·推荐算法
+VX:Fegn089510 小时前
计算机毕业设计|基于springboot + vue建筑材料管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
雪碧聊技术10 小时前
ElementPlus徽章组件:展示日期面板每天未完成的待办数量
vue.js·日期选择器·elementplus·el-badge徽章组件
go_caipu10 小时前
Vben Admin管理系统集成qiankun微服务(二)
前端·javascript
幻云201010 小时前
Next.js指南:从入门到精通
开发语言·javascript·人工智能·python·架构
唐叔在学习10 小时前
insertAdjacentHTML踩坑实录:AI没搞定的问题,我给搞定啦
前端·javascript·html
小王和八蛋11 小时前
前端存储与离线应用实战:Cookie、LocalStorage、PWA 及 Service Worker 核心知识点
前端·javascript
军军君0111 小时前
Three.js基础功能学习七:加载器与管理器
开发语言·前端·javascript·学习·3d·threejs·三维