element-ui合并表头

原创已于 2022-01-19 12:53:11 修改 · 991 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#element #vue #table

于 2022-01-19 12:52:44 首次发布

vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种在Vue项目中实现表格列扩展与隐藏的方法。通过使用$nextTick确保DOM更新后执行操作，实现了首列扩展及指定列隐藏的功能。此方法适用于需要对表格布局进行定制化的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键点

mounted() {
	this.$nextTick(() => {
		// 一定要加 nextTick 不然出不来效果
		const cells = document.getElementsByClassName("el-table__header")[0].rows[0].cells;
      	cells[0] && (cells[0].colSpan = 2); // 扩展第一列（如果不扩展第一列可以看到第三列会向左移）
      	cells[1] && (cells[1].style.display = "none"); // 隐藏第二列
	}};
}

实际参考项目

codepen