element el-table 设置行高和表头高度

最新推荐文章于 2025-06-11 20:04:00 发布

小韩本韩！

最新推荐文章于 2025-06-11 20:04:00 发布

阅读量7.5k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_71645665/article/details/139296035

element el-table 设置行高和表头高度

第一种方式使用css

 <el-table :data="ycList" border class="tableBox">
          <el-table-column prop="zb" label="异常指标" width="197" />
          <el-table-column prop="n" label="一个月内" width="119" />
          <el-table-column prop="s" label="一个月以上" width="119" />
          <el-table-column prop="h" label="合计" width="119" />
        </el-table>
 
 
/deep/.tableBox {
  th {
    padding: 0 !important;
    height: 10px;
    line-height: 10px;
  }
  td {
    padding: 0 !important;
    height: 30px;
    line-height: 30px;
  }
}

第二种方式el-element-ui的方法

<el-table
        v-loading="loading"
        height="calc(100vh - 210px)"
        class="exporttable"
        :data="userList"
        :header-cell-style="{
          borderColor: '#01e3ed',
          background: '#103366',
          color: '#fff',
          height: '60px',
        }"
        :cell-style="{
          borderColor: '#01e3ed',
          background: '#1a5ca8',
          color: '#fff',
        }"
        :row-style="{ height: '50px' }"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column
          label="用户姓名"
          align="center"
          prop="name"
          width="120"
        />
       
      </el-table>