<template> <div class="index"> <el-form ref="searchFrom" :model="searchFrom" label-width="100px"> <el-row> <el-col :span="12"> <el-form-item label="时间"> <el-date-picker v-model="searchFrom.watchTime" type="daterange" range-separator="至" start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期"> </el-date-picker> </el-form-item> </el-col> <el-col :span="6" :offset="6"> <el-form-item style="float: right"> <el-button type="primary" @click="getList">搜索</el-button> </el-form-item> </el-col> </el-row> </el-form> <el-table :data="tableData" border style="width: 100%"> <el-table-column v-for="(data, index) in tableHead" :key="data" :label="data" > <template slot-scope="scope"> <span v-html="scope.row[index]"></span> </template> </el-table-column> </el-table> </div> </template> <script> import {getWechatStatisticListApi} from "../../service/api"; export default { name: "index", data(){ return { searchFrom: { watchTime: [] }, tableData: [], tableHead:[] } }, methods: { defaultTime(){ let date = new Date(); let year = date.getFullYear(); let Month = date.getMonth()+1; if(Month < 10){ Month = `0${Month}` } let Day = date.getDate(); if(Day<10)Day = `0${Day}` let star = `${year}-${Month}-01`; let end = `${year}-${Month}-${Day}` this.searchFrom.watchTime = [star,end] }, getList(){ let json = { }; if(this.searchFrom.watchTime && this.searchFrom.watchTime.length > 0){ json.start_at = this.searchFrom.watchTime[0] json.end_at = this.searchFrom.watchTime[1] } getWechatStatisticListApi(json).then((res)=>{ this.tableHead = res[0] this.tableData = res.slice(1); }) }, }, mounted(){ this.defaultTime(); this.getList(); } } </script> <style scoped> .index { padding: 20px 0; } </style>