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);
		},
相关推荐
kyriewen9 小时前
别再对着 TypeScript 报错发呆了:我把 10 个最常见的红色波浪线翻译成了人话
前端·javascript·typescript
free3510 小时前
从 0 实现一个 Tiny JavaScript VM:项目架构拆解
javascript
暴走的小呆10 小时前
Vue 2 中 Object 的变化侦测:从 getter/setter 到 Dep、Watcher、Observer
vue.js
英勇无比的消炎药10 小时前
TinyVue v-auto-tip: 文本超长自动提示的优雅方案
vue.js
徐小夕12 小时前
我们开源了一款“框架无关”的思维导图编辑器,3分钟集成到任意系统
前端·javascript·github
PBitW12 小时前
GPT训练我的第三天,明白了应该咋说满分回答!😕😕😕
前端·javascript·面试
像我这样帅的人丶你还12 小时前
Java 后端详解(四):分页与搜索
java·javascript·后端
labixiong12 小时前
还原一个完整符合规范的 Promise(二)
前端·javascript
时光足迹12 小时前
腾讯云 TRTC UniApp SDK 从入门到上线
前端·vue.js·uni-app
时光足迹13 小时前
uni-app 里把加密视频嵌入页面播放?我分析了 4 种方案,只有 1 种接近完美
前端·vue.js·uni-app