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

王小婷

发布于 2022-01-09 10:00:34

1.5K0

发布于 2022-01-09 10:00:34

文章被收录于专栏：编程微刊

功能：

在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>