项目中不乏遇到需要对table表格中的某些特殊字段进行标记，用cell-style="cellStyle"来控制区分作为一种特殊手段是再合适不过了，不多bibi，直接上车。
cell-style=“cellStyle”结合其回调方法**cellStyle(row, column, rowIndex, columnIndex)**来改变单元格样式
上代码：
1.这是一个可展开的table表格。
<el-table v-loading="loading.table" :data="data.list.items" border fit stripe highlight-current-row:cell-style="cellStyle" element-loading-text="玩命加载中" element-loading-spinner="el-icon-loading":header-cell-class-name="headerStyle" style="width:100%"><el-table-column type="expand"><template slot-scope="props"><el-form label-position="left" inline class="demo-table-expand"><el-col :span="24"><el-col :span="8"><el-form-item label="购资编码"><span style="color:#ff0000">{{ props.row.purchaseCode }}</span></el-form-item><el-form-item label="买受人姓名"><span>{{ props.row.name }}</span></el-form-item><el-form-item label="身份证号"><span>{{ props.row.idNumber }}</span></el-form-item><el-form-item label="买受人手机号码"><span>{{ props.row.phoneNumber }}</span></el-form-item><el-form-item label="录入人"><span>{{ props.row.inputPeople }}</span></el-form-item><el-form-item label="录入时间"><span>{{ props.row.inputTime }}</span></el-form-item></el-col><el-col :span="8"><el-form-item label="审核状态"><span style="color:#008000">{{ props.row.auditStatus }}</span></el-form-item><el-form-item label="说明"><span style="color:#ff0000">{{ props.row.explain }}</span></el-form-item><el-form-item label="是否网签"><span style="color:#008000">{{ props.row.isNetSign }}</span></el-form-item><el-form-item label="剩余时间"><span>{{ props.row.residueTime }}</span></el-form-item><el-form-item label="审核时间"><span>{{ props.row.auditTime }}</span></el-form-item></el-col><el-col :span="8"><div class="demo-image"><div class="block" v-for="fit in fits" :key="fit"><span class="demonstration">{{ fit }}</span><el-image style="width: 100px; height: 100px" :src="url" :fit="fit"></el-image></div></div></el-col></el-col></el-form></template></el-table-column><el-table-column label="购资编码" align="center" prop="purchaseCode" min-width="150" style="color: red" /><el-table-column label="买受人姓名" align="left" prop="name" min-width="150" /><el-table-column label="审核状态" align="left" prop="auditStatus" min-width="150" /><el-table-column label="说明" align="center" prop="explain" min-width="150" /><el-table-column label="是否已网签" align="center" prop="isNetSign" min-width="150" /><el-table-column label="录入时间" align="center" prop="creationTime" min-width="150"><template slot-scope="scope">{{ scope.row.creationTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</template></el-table-column><el-table-column label="操作" align="center" min-width="200"><template slot-scope="scope"><el-button icon="el-icon-edit" size="mini" type="success" @click="editHandler(scope.$index, scope.row)">详情</el-button><el-button icon="el-icon-delete" size="mini" type="danger" @click="deleteHandler(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table>
methods中有其回调方法：
//设置字体颜色cellStyle(row, column, rowIndex, columnIndex) {//根据报警级别显示颜色// console.log(row);// console.log(row.column);if (row.column.label === "购资编码" &&row.row.purchaseCode != null &&row.row.purchaseCode != "") {return "color:#ff0000";} else if (row.column.label === "审核状态" &&row.row.auditStatus === "审核通过") {return "color:#008000";} else if (row.column.label === "说明" &&row.row.explain === "网签作废") {return "color:#ff0000";} else if (row.column.label === "是否已网签" &&row.row.isNetSign === "是") {return "color:#008000";}},
针对某一列（判断列名的label，条件判断）进行改变样式操作，在展开列中同样可进行条件判断来对特殊字段突出标注。
效果图
完美结束
