element el-table 设置行高

最新推荐文章于 2024-07-15 15:15:49 发布

原创最新推荐文章于 2024-07-15 15:15:49 发布 · 9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

本文介绍如何通过添加自定义的CSS样式来调整Element UI框架中表格组件的外观，包括行高、内边距等属性，使表格呈现更加美观且符合特定需求的设计。

先给table加一个class

        <el-table
          class="tableBox"
          v-loading="loading"
          :data="tableData"
          height="700px"
          :cell-class-name="changeCellClass"
          style="width: 100%;">
          <el-table-column
            fixed
            prop="trading_day"
            label="TradingDay"
            width="120">
          </el-table-column>

再写css

<style lang="scss">
   .tableBox {
     th {
       padding: 0 !important;
       height: 48px;
       line-height: 48px;
     }
     td {
       padding: 0 !important;
       height: 48px;
       line-height: 48px;
     }
   }
</style>