推薦指數(shù)：
Github 地址：https://github.com/PanJiaChen/vue-element-admin
Demo體驗(yàn)：https://panjiachen.github.io/vue-element-admin/#/dashboard
官方文檔：https://panjiachen.github.io/vue-element-admin-site/zh/
功能：
在json數(shù)據(jù)里面刁俭，patrolState為0 的時(shí)候，代表異常畴蒲，當(dāng)數(shù)據(jù)異常的時(shí)候虹统，這一行表格的數(shù)據(jù)都標(biāo)紅。
步驟
1:在views底下新建一個(gè)test文件夾
里面新建一個(gè)vue文件和一個(gè)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部門(mén)",
"stationName": "2號(hào)基站",
"address": "官大會(huì)展紅心",
"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部門(mén)",
"stationName": "2號(hào)基站",
"address": "官大會(huì)展紅心",
"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部門(mén)",
"stationName": "2號(hào)基站",
"address": "官大會(huì)展紅心",
"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部門(mén)",
"stationName": "2號(hào)基站",
"address": "官大會(huì)展紅心",
"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部門(mén)",
"stationName": "2號(hào)基站",
"address": "官大會(huì)展紅心",
"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部門(mén)",
"stationName": "2號(hào)基站",
"address": "官大會(huì)展紅心",
"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="終端編號(hào)"></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="部門(mén)"></el-table-column>
<el-table-column prop="arriveTime" label="到達(dá)時(shí)間"></el-table-column>
<el-table-column prop="leaveTime" label="離開(kāi)時(shí)間"></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="狀態(tài)"></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 {
// 分頁(yè)
currentPage: 1, //初始頁(yè)
pagesize: 5, // 每頁(yè)的數(shù)據(jù)
pvData: [],
};
},
created() {
//查詢管理表格接口
this.getQuerycheckList();
},
methods: {
// 初始頁(yè)currentPage吨岭、初始每頁(yè)數(shù)據(jù)數(shù)pagesize和數(shù)據(jù)data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize); //每頁(yè)下拉顯示數(shù)據(jù)
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage); //點(diǎn)擊第幾頁(yè)
},
// 表格接口定義
getQuerycheckList() {
this.dataLoading = true;
import('./mock').then((res) => {
this.pvData = res.data;
this.dataLoading = false;
});
},
//判斷巡更數(shù)據(jù)是否異常
tableRowClassName({row}) {
return row.patrolState == 0? 'errorStatus' : ''
},
//格式化狀態(tài)
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>
