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