element ui设置表格表头高度和每一行的高度

填坑记录：今天用element ui的表格组件作用户信息展现，直接拉取的官网的代码过来，发现表头和每一行都过高了，以下：

 

　　

　　由于第一次使用element ui的表格组件，不太清楚会遇到这样的坑，觉得能轻松控制高度，因而去百度大佬们的解决办法，也试了好几个，发现改变不了样式，快准备放弃等明天问下项目组的人的时候，看到了一篇文章：https://blog.csdn.net/u012499506/article/details/81217277（Vue修改element ui table tr th高度以及背景颜色），因而就抱着试试看的心态把大佬的改变背景色的代码复制过来用了一下，发现能够使用，因而就处处折腾，终于实现想要的效果了，先放上代码和效果图：

.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
}
.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 40px;
}

　　

　　我发现表头的行高和表格list内容的行高经组件渲染出来后是在不一样的类名下的，截图：

 

因此将上面的代码放在css下最外层的类名中便可，也不晓得是否是歪打正着。。。也算解决了我遇到的一个坑，留个记录。

 

补充：今天(2019/6/4)在新的项目又用到表格，而后按照以前的方法设置，可是没有成功，而后调试了半天，原来是在style上设置了scoped属性，去掉这个属性便可，具体为啥后面项目搞了再研究下...