element-ui table表格设置行高和表头与内容颜色

可爱的小土豆

于 2024-06-26 16:18:05 发布

阅读量340

点赞数 3

分类专栏： element 文章标签： ui vue.js 前端

本文链接：https://blog.csdn.net/u011857538/article/details/139992013

版权

element 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

html

<el-table
	:data="tableData"
	style="width: 100%">
	<el-table-column
		prop="date"
		label="日期"
		width="180">
	</el-table-column>
	<el-table-column
		prop="name"
		label="姓名"
		width="180">
	</el-table-column>
	<el-table-column
		prop="address"
		label="地址">
	</el-table-column>
</el-table>

script

第一种

在el-table里面添加

row-class-name="my-row"

在style里面添加

.my-row {
  height:48px; /* 设置你想要的行高 */
}

在这里插入图片描述

第二种

el-table里面添加

:header-cell-style="{
		borderColor: '#eee',
		background: '#eee',
		color: '#666',
		height: '60px',
}"
:cell-style="{
	borderColor: '#eee',
	background: '#f1f1f1',
	color: '#666',
}"
:row-style="{ height: '50px' }"

在这里插入图片描述