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);
		},
相关推荐
ShineWinsu4 小时前
对于JavaScript:操作元素的解析
开发语言·前端·javascript·面试·web·dom·元素
lemon_yyds8 小时前
Vue 项目嵌入 React H5 技术方案
vue.js·react.js
顽疲8 小时前
java springboot vue 养老系统源码详解:请假 care_leave 销假与床位停费日扣实践
java·vue.js·spring boot
szp20058 小时前
Cache API 会丢掉 URL 里的 #:我的 9 个模型分块一直写在同一条缓存上
javascript·浏览器
keyipatience8 小时前
TypeScript学习(1)
前端·javascript·学习·typescript·html·css3
xifangge20259 小时前
基于 JavaScript 实现 CNC 数控切削参数与螺纹公差纯前端核算引擎
开发语言·前端·javascript
honkun69 小时前
vue 表格组件 vxe-table 修改滚动条样式,修改滚动条样式,统一宽度、颜色与自动隐藏
前端·javascript·vue.js
FRing0310 小时前
JavaScript入门到精通二十四(正则表达式、元字符、修饰符)
开发语言·前端·javascript·正则表达式
171320330计算机毕设编程10 小时前
计算机毕业设计 基于springboot+vue的在线观鸟视频播放网站 LW PPT
java·大数据·vue.js·spring boot·算法·课程设计
大明二代11 小时前
从 RAG 到有记忆的 Agent:Mastra Memory 与 PostgreSQL 实战
前端·javascript·人工智能