Element-UI+Vue使用cell-style=“cellStyle“改变单元格字体样式

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

效果图

完美结束

Element-UI+Vue使用cell-style=“cellStyle“改变单元格字体样式相关推荐

element UI表格使用cell-style改变单元格样式
[例子1] // 调用方法的部分为: <el-table :cell-style="timeStyle" >// 要修改样式的部分为: <el-table-col ...
element ui 第一列相同数据相同合并单元格
template部分 <el-table :data="tableData" :span-method="objectSpanMethod" border ...
Vue+iview表格如何给单个单元格设置样式
官方文档地址:https://www.iviewui.com/components/table#TDYS,单元格:通过给数据 data 设置字段 cellClassName 可以给任意一个单元格指定样 ...
Element ui+vue前端框架组件主题美化后台管理系统模板html
最新设计了一套Element ui主题模板演示地址:Element ui+vue前端框架组件主题美化后台管理系统模板 Element ui版本号:2.15.12 vue版本号:2.7. ...
element el-table组件修改表格表头和某个单元格背景色
element el-table组件修改表格表头和某个单元格背景色 <template><div><el-table:data="tableData" ...
element更改表格表头、行、指定单元格样式
element更改表格表头.行.指定单元格样式更改表格的样式使用header-cell-style属性,可为函数或对象函数写法  <el-table ...
java通过CellStyle设置单元格背景颜色
版权声明:本文为CSDN博主「想养一只!」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明. 原文链接:java通过CellStyle设置单元格背景颜色设置单元格背景 ...
纯前端js(或者vue)导出excel实现：合并单元格、设置单元格样式、单元格内换行
前提是安装xlsx,已经可以导出普通的excel npm install --save xlsx file-saver 然后需要安装 npm install xlsx-style 如果运行的时候报错 ...
【原创】EXCEL颜色相关操作：改变单元格颜色，获得颜色值，按颜色筛选等
问题&目的 EXCEL里,我们有时候会用到颜色相关的操作,比如我们想根据单元格的值,自动修改单元格的颜色我们想知道单元格的颜色代码我们想根据现有的表格颜色进行筛选 1 如果自动批量改变单 ...

Element-UI+Vue使用cell-style=“cellStyle“改变单元格字体样式

Element-UI+Vue使用cell-style=“cellStyle“改变单元格字体样式相关推荐

最新文章

热门文章