效果
需求
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>
js
// 设置表格第一列背景色
columnStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 0) {
return 'background: #f8f8f9;padding:0;'
}else{
return 'padding:0;'
}
}
关键代码
:row-style="{ height: '35px' }" //设置行高
:cell-style="columnStyle" //修改单元格样式
columnStyle(){} //设置单元格样式(和row-style结合)
bug
可以设置行高但低于一定值时不再变化既行高存在最小值
原因:
表格单元格自带的padding属性撑开了格子导致height失效
解决方式:
利用cell-style属性设置表格单元格padding为0