修改el-table行高

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

iiiiis泡面

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

阅读量3.7k

点赞数 12

本文链接：https://blog.csdn.net/dd_lcdw/article/details/135543586

版权

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

摘要由CSDN通过智能技术生成

效果

需求

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;'
      }
    }