vue-element-admin表格json数据渲染，异常数据一行显示红色

绝地灬酷狼 2022-09-05 04:09 81阅读 0赞

推荐指数：  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
Demo体验：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][https_panjiachen.github.io_vue-element-admin_dashboard]  
官方文档：[https://panjiachen.github.io/vue-element-admin-site/zh/][https_panjiachen.github.io_vue-element-admin-site_zh]

功能：

在json数据里面，patrolState为0 的时候，代表异常，当数据异常的时候，这一行表格的数据都标红。

步骤

1:在views底下新建一个test文件夹  
里面新建一个vue文件和一个json文件  
备用

![aacad81c70d73252657e7f276a0501ca.png][]

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>

![b89a8a15265947b710c3a17e66e8b0fc.png][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[https_github.com_PanJiaChen_vue-element-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin%2F%23%2Fdashboard
[https_panjiachen.github.io_vue-element-admin-site_zh]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin-site%2Fzh%2F
[aacad81c70d73252657e7f276a0501ca.png]: /images/20220829/fe37679bf5814602baf6c8d8a98ec742.png
[b89a8a15265947b710c3a17e66e8b0fc.png]: /images/20220829/f9f4667c711642249acd17c5e1acbf72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20220829/332d2c034f644841b6a404ad82b221fe.png