element 表格中一行显示两行的问题?

需求是这样的,每一个渠道需要展示 昨日 今日 两天的数据,样式如图:
image.png

目前看来是实现了,其实没有,因为我把代码写死了,只为了展示个样式,我是后端,求各位前端大佬指教指教~

后端接口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>

各位前端大佬,救救小弟吧~

阅读 2.8k
1 个回答

看文档https://element.eleme.cn/#/zh...

比如当日新增就可以写成

<el-table-column
    prop="todayNewly"
    label="当日新增"
    header-align="center">
    <template slot-scope="scope">
        <el-row prop='today'>{{ scope.row.todayNewly.today }}</el-row>
        <el-row prop='yesterday'>{{ scope.row.todayNewly.yesterday }}</el-row>
    </template>
</el-table-column>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏