推荐指数：
Github 地址：https://github.com/PanJiaChen/vue-element-admin
Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard
官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/
功能：
在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>
