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屬性，去掉這個屬性即可，具體為啥后面項目搞了再研究下...