element-plus table循环生成列

最新推荐文章于 2024-07-06 00:11:00 发布

蜡笔大杺

最新推荐文章于 2024-07-06 00:11:00 发布

阅读量220

点赞数 1

文章标签： javascript html5 vue.js elementui

本文链接：https://blog.csdn.net/qq_44871531/article/details/137267638

版权

<el-table  resizable border :data="items">
	<el-table-column v-for="(it, index) in columnArr" :key="index" :label="it.headerName" :prop="it.field" :formatter="it.dateFormat" :show-overflow-tooltip="true" :render-header="renderHeader" align="center" header-align="center" />
</el-table>


//把下面的xxx换成自己的字段
	columnArr=[{
				field: 'q',
				headerName: xxx,
				sort: false,
				index: xxx,
				style: { width: '150px' },
				datastyle: { 'text-align': 'left' },
			}];
//可选
function renderHeader({ column, $index }) {
	// 新建一个 span
	const span = document.createElement('span');
	// 设置表头名称
	span.innerText = column.label;
	// 临时插入 document
	document.body.appendChild(span);
	// 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
	column.minWidth = span.getBoundingClientRect().width + 80;
	// 移除 document 中临时的 span
	document.body.removeChild(span);
	return column.label;
}