el-table修改表头、列的背景颜色、字体样式_el-table-column背景颜色-CSDN博客
设置表头背景颜色，字体
<el-table :header-cell-style="rowClass" border :data="tableDataTwo" style="width: 100%"><el-table-column width="79" prop="id" label="id" /><el-table-column width="80" prop="teacher" label="姓名" /><el-table-column width="170" prop="adress" label="地址" /><el-table-column width="110" prop="adress1" label="地址_1" /><el-table-column width="110" prop="adress2" label="地址_2" /><el-table-column width="110" prop="adress3" label="地址_3" />
</el-table>// :header-cell-style="rowClass" rowClass({ rowIndex, columnIndex }) {if (rowIndex == 0) {if(columnIndex == 3 || columnIndex == 4 || columnIndex == 5 || columnIndex == 6){return {background:'#ddf3df',color:'black'}}}
},设置列的背景颜色
:cell-style="columnStyle"
<el-table :show-header="false" :data="tableData" border style="width: 1200px;" :cell-style="columnStyle"><el-table-column width="200"><template slot-scope="scope"><span style="margin-left: 10px">企业类型</span></template></el-table-column>
<el-table>// 自定义列背景色
columnStyle({ row, column, rowIndex, columnIndex }) {// console.log(column, rowIndex, columnIndex);if ((columnIndex == 2 && rowIndex == 0) || (columnIndex == 0 && rowIndex == 0) || (columnIndex == 4 && rowIndex == 0)) {//第三第四列的背景色就改变了2和3都是列数的下标return "background:#f3f6fc;";} else {return "background:#ffffff;";}
}
