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