修改el-table行高

最新推荐文章于 2025-09-09 18:09:00 发布

原创最新推荐文章于 2025-09-09 18:09:00 发布 · 6.9k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript #前端

文章讲述了在使用Vue的ElementUI创建表格时，如何设置第一列背景颜色，调整单元格高度，以及遇到的bug——当行高低于一定值时不再变化。问题源于表格单元格的padding影响了height。解决方案是通过`cell-style`属性将单元格padding设为0。

效果

需求

1. 设置表格第一列背景颜色

2.设置单元格高度

代码

html

<el-table 
    :data="this.fullData.jiankong.info.error" 
    border 
    style="width: 762px;height: 216px;"
    :row-style="{ height: '35px' }" 
    :cell-style="columnStyle">

    <el-table-column label="-" align="center" prop="name" :show-overflow-tooltip="true">
        <template slot-scope="scope">
            <dict-tag :options="dict.type.fullchain_build_fire" :value="scope.row.yjlx" />
        </template>
     </el-table-column>
     <el-table-column label="1列" align="center" prop="hs" :show-overflow-tooltip="true" />
     <el-table-column label="2列" align="center" prop="cs" :show-overflow-tooltip="true" />
     <el-table-column label="3列" align="center" prop="ys" :show-overflow-tooltip="true" />
     <el-table-column label="4列" align="center" prop="ls" :show-overflow-tooltip="true" />
</el-table>

    // 设置表格第一列背景色
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return 'background:	#f8f8f9;padding:0;'
      }else{
        return 'padding:0;'
      }
    }