开发过程中,遇到了需要将表格的表头单独设置特定的样式,看了ElementPlus的文档说是可以使用header-cell-style传入对应的函数进行设置,但我后来又研究了下发现使用#header的插槽可以进行更高程度的自定义构写

<el-table >	
	<el-table-column type="index" label="序号" width="70" />
		<el-table-column  width="150">
			<template #header>
				<div class="must"><span class="red">*</span>显示名称</div>
                //样式和结构随便写,会保留Table组件表头的基础样式//
			</template>
		</el-table-column>
</el-table>

 

通过使用这个插槽我实现了对Table的单独表头的自定义,如果有多个不同的表头需要分别设置,那么也分别在对应的el-table-column进行#header的插槽构写就可以了

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐