需求是这样的,每一个渠道需要展示 昨日 今日 两天的数据,样式如图:
目前看来是实现了,其实没有,因为我把代码写死了,只为了展示个样式,我是后端,求各位前端大佬指教指教~
后端接口JSON数据:
{
"data":[
{
"channel":"渠道1号",
"firstLogin":{
"today":10,
"yesterday":20
},
"todayNewly":{
"today":10,
"yesterday":20
},
"todayLoginUser":300,
"todayLoginNumber":44,
"todaySumPay":33,
"arpu":3,
"arppu":10
},
{
"channel":"渠道2号",
"firstLogin":{
"today":30,
"yesterday":40
},
"todayNewly":{
"today":10,
"yesterday":20
},
"todayLoginUser":300,
"todayLoginNumber":44,
"todaySumPay":33,
"arpu":3,
"arppu":10
},
{
"channel":"渠道3号",
"firstLogin":{
"today":50,
"yesterday":60
},
"todayNewly":{
"today":10,
"yesterday":20
},
"todayLoginUser":300,
"todayLoginNumber":44,
"todaySumPay":33,
"arpu":3,
"arppu":10
},
{
"channel":"渠道4号",
"firstLogin":{
"today":70,
"yesterday":80
},
"todayNewly":{
"today":10,
"yesterday":20
},
"todayLoginUser":300,
"todayLoginNumber":44,
"todaySumPay":33,
"arpu":3,
"arppu":10
}
]
}
目前前端写法:
<div id="app">
<div class="tab-style">
<template>
<el-table
:data="tableData"
max-height="400"
stripe
fit
:summary-method="getSummaries"
show-summary="true"
style="width: 100%; margin-top: 20px"
:cell-style="rowStyle">
<el-table-column
prop="channel"
label="渠道"
width="180"
header-align="center">
</el-table-column>
<el-table-column>
<el-row>今天</el-row>
<el-row>昨天</el-row>
</el-table-column>
<el-table-column
prop="firstLogin"
label="首登设备"
width="180"
header-align="center">
<el-row prop='today'>11</el-row>
<el-row prop='yesterday'>32</el-row>
</el-table-column>
<el-table-column
prop="todayNewly"
label="当日新增"
header-align="center">
<el-row prop='today'>10</el-row>
<el-row prop='yesterday'>788</el-row>
</el-table-column>
<el-table-column
prop="todayLoginUser"
label="当日登录用户"
header-align="center">
</el-table-column>
<el-table-column
prop="todayLoginNumber"
label="当日登录次数"
header-align="center">
</el-table-column>
<el-table-column
prop="todaySumPay"
label="当日总付费"
header-align="center">
</el-table-column>
<el-table-column
prop="arpu"
label="ARPU"
header-align="center">
</el-table-column>
<el-table-column
prop="arppu"
label="ARPPU"
header-align="center">
</el-table-column>
</el-table>
</template>
</div>
</div>
<script>
const data = {"data":[{"channel":"渠道1号","firstLogin":{"today":10,"yesterday":20},"todayNewly":{"today":10,"yesterday":20},"todayLoginUser":300,"todayLoginNumber":44,"todaySumPay":33,"arpu":3,"arppu":10},{"channel":"渠道2号","firstLogin":{"today":30,"yesterday":40},"todayNewly":{"today":10,"yesterday":20},"todayLoginUser":300,"todayLoginNumber":44,"todaySumPay":33,"arpu":3,"arppu":10},{"channel":"渠道3号","firstLogin":{"today":50,"yesterday":60},"todayNewly":{"today":10,"yesterday":20},"todayLoginUser":300,"todayLoginNumber":44,"todaySumPay":33,"arpu":3,"arppu":10},{"channel":"渠道4号","firstLogin":{"today":70,"yesterday":80},"todayNewly":{"today":10,"yesterday":20},"todayLoginUser":300,"todayLoginNumber":44,"todaySumPay":33,"arpu":3,"arppu":10}]};
var Main = {
data() {
return {
tableData: data['data']
};
},
methods: {
rowStyle(){
return "text-align:center"
},
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += '';
} else {
sums[index] = 'N/A';
}
});
return sums;
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
各位前端大佬,救救小弟吧~
看文档https://element.eleme.cn/#/zh...
比如当日新增就可以写成