el-table改变行高和样式

最近在学习vue+elementUI前端框架，记录修改el-table行高和样式遇见的问题及解决办法。

1.方法一 使用官方文档修改样式属性（推荐）

<el-table
	:data="topicList"
	:row-style="{height:0+'px'}" // 更改表格内容每一行的样式，注意直接写0px或'0px'没有效果
	:cell-style="{padding:0+'px'}" // 更改表格内容每一单元格样式，注意直接写0px或'0px'没有效果
	// 更改表头每一单元格样式，此处可以直接写'0px'
	:header-cell-style="{background:'#F5F7FA',color:'#606266', height:'10px', padding:'0px'}"
	style="margin-top:10px" // 更改整个表格的样式
	>

效果图：

单纯的更改height是没办法小于内容高度的，所以当height设置的值小于内容高度时，实现显示的height等于内容的高度。

2.方法二 通过样式检查F12直接在style里面覆盖样式（应注意全局样式污染）

浏览器中F12打开检查（我使用的是谷歌浏览器，其他浏览器类似）找到想要更改的样式
图中绿色显示则为padding: 12px 0; 想要将padding调小一点

复制.el-table td .el-table th {}在style中编写样式覆盖

<style lang="scss">
.el-table td, .el-table th {
    padding: 1px 0;
    // height: 100px;
}
</style>

因为elementUI是全局作用的，所以需要将style中的scoped给去掉

但是这样就会发生全局样式污染，导致整个项目所有的el-table的样式都被修改了
解决办法：添加父样式或祖先样式将其包裹（可能用词不当，欢迎指正~）


结果：

样式已经被覆盖掉了，而且padding也修改了，同样其他样式也可以用这种方法修改。

以上就是最近学习到的el-table行高和样式修改的方式，欢迎点赞评论~~