项目中不乏遇到需要对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，条件判断）进行改变样式操作，在展开列中同样可进行条件判断来对特殊字段突出标注。

2. 效果图

完美结束