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);
		},
相关推荐
FRing037 小时前
vue2干货总结2(v-bind、v-for、v-model、指令修饰符、v-bind操作class和style)
开发语言·前端·vue.js·vue2
幸运小猿7 小时前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
速易达网络10 小时前
ECharts 图表制作完全指南:从零到可视化实战
前端·javascript·echarts
徐小夕10 小时前
深度剖析 30k star 的编码 Agent DeepSeek-Reasonix:长会话 Token 成本直降 80%
前端·vue.js·github
paopaokaka_luck10 小时前
灾害应急物资管理系统(AI应急助手、Echarts可视化数据看板、捐赠入库联动、 物资全流程管理、库存变动追溯、灾情资讯与互动反馈、物资发放公示)
java·前端·javascript·spring boot·mysql·tomcat·echarts
kyriewen11 小时前
我验了 7 种 sticky 失效说法:3 种根本不成立
前端·javascript·程序员
我命由我1234512 小时前
Python 实用操作 - 文件操作(打开与关闭文件、读取文件、文件写入)
java·开发语言·前端·javascript·数据库·python·java-ee
Momo__13 小时前
你写的 import 重试,从来没生效过
前端·javascript·typescript
ruanno_top13 小时前
1 万行表格只渲染 18 行:虚拟滚动让我放弃了三个功能
vue.js
仨孩子的爹13 小时前
套打总偏两毫米:预印刷单据的校准方法和三个误区
vue.js