功能：
在json数据里面，patrolState为0 的时候，代表异常，当数据异常的时候，这一行表格的数据都标红。
步骤
1:在views底下新建一个test文件夹
里面新建一个vue文件和一个json文件
备用
2：使用
mock.json
{ "msg": "查询成功", "total": 0, "code": 1, "data": [ { "stationMac": "TH:23:IJ:12:DF", "arriveTime": "2021-07-16 12:30:00", "leaveTime": "2021-07-16 12:40:00", "patrolState": 0, "id": 1, "name": "ls", "deviceId": "0000001", "sex": 1, "authority": 0, "organId": 0, "organName": "A部门", "stationName": "2号基站", "address": "官大会展红心", "organIds": null, "isPagination": false, "page": 1, "rows": 1 }, { "stationMac": "TH:23:IJ:12:DF", "arriveTime": "2021-07-16 16:52:00", "leaveTime": "2021-07-16 16:52:00", "patrolState": 1, "id": 2, "name": "zs", "deviceId": "0000002", "sex": 1, "authority": 0, "organId": 0, "organName": "A部门", "stationName": "2号基站", "address": "官大会展红心", "organIds": null, "isPagination": false, "page": 1, "rows": 1 }, { "stationMac": "TH:23:IJ:12:DF", "arriveTime": "2021-07-16 16:58:00", "leaveTime": "2021-07-16 16:58:00", "patrolState": 0, "id": 3, "name": "zs", "deviceId": "0000003", "sex": 1, "authority": 0, "organId": 0, "organName": "A部门", "stationName": "2号基站", "address": "官大会展红心", "organIds": null, "isPagination": false, "page": 1, "rows": 1 }, { "stationMac": "TH:23:IJ:12:DF", "arriveTime": "2021-07-16 16:59:00", "leaveTime": "2021-07-16 16:59:00", "patrolState": 1, "id": 4, "name": "zs", "deviceId": "0000004", "sex": 1, "authority": 0, "organId": 0, "organName": "A部门", "stationName": "2号基站", "address": "官大会展红心", "organIds": null, "isPagination": false, "page": 1, "rows": 1 }, { "stationMac": "TH:23:IJ:12:DF", "arriveTime": "2021-07-16 16:59:00", "leaveTime": "2021-07-16 16:59:00", "patrolState": 1, "id": 4, "name": "zs", "deviceId": "0000004", "sex": 1, "authority": 0, "organId": 0, "organName": "A部门", "stationName": "2号基站", "address": "官大会展红心", "organIds": null, "isPagination": false, "page": 1, "rows": 1 }, { "stationMac": "TH:23:IJ:12:DF", "arriveTime": "2021-07-16 16:59:00", "leaveTime": "2021-07-16 16:59:00", "patrolState": 1, "id": 4, "name": "zs", "deviceId": "0000004", "sex": 1, "authority": 0, "organId": 0, "organName": "A部门", "stationName": "2号基站", "address": "官大会展红心", "organIds": null, "isPagination": false, "page": 1, "rows": 1 } ] }
test.vue
<template> <div class="app-container"> <el-table :data="pvData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" border fit highlight-current-row :row-class-name="tableRowClassName" > <el-table-column prop="deviceId" label="终端编号"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column :formatter="formatSex" prop="sex" label="性别"></el-table-column> <el-table-column prop="organName" label="部门"></el-table-column> <el-table-column prop="arriveTime" label="到达时间"></el-table-column> <el-table-column prop="leaveTime" label="离开时间"></el-table-column> <el-table-column prop="stationName" label="基站名称"></el-table-column> <el-table-column prop="stationMac" label="基站MAC"></el-table-column> <el-table-column prop="address" label="基站地址"></el-table-column> <el-table-column prop="patrolState" :formatter="formatStatus" label="状态"></el-table-column> </el-table> <el-pagination style="margin: 12px 0px" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pvData.length" > </el-pagination> </div> </template> <script> export default { data() { return { // 分页 currentPage: 1, //初始页 pagesize: 5, // 每页的数据 pvData: [], }; }, created() { //查询管理表格接口 this.getQuerycheckList(); }, methods: { // 初始页currentPage、初始每页数据数pagesize和数据data handleSizeChange: function (size) { this.pagesize = size; console.log(this.pagesize); //每页下拉显示数据 }, handleCurrentChange: function (currentPage) { this.currentPage = currentPage; console.log(this.currentPage); //点击第几页 }, // 表格接口定义 getQuerycheckList() { this.dataLoading = true; import('./mock').then((res) => { this.pvData = res.data; this.dataLoading = false; }); }, //判断巡更数据是否异常 tableRowClassName({row}) { return row.patrolState == 0? 'errorStatus' : '' }, //格式化状态 formatStatus(row, column) { return row.patrolState === 1 ? "正常" : "异常"; }, //格式化性别 formatSex(row, column) { return row.sex === 1 ? "男" : "女"; }, }, }; </script> <style lang="scss"> .el-table tr.el-table__row.errorStatus{ color: red; } </style>
