先来一个节目效果

在这里插入图片描述
可以看到图中表格一行中显示了两行的效果,渠道1号,今日和昨日的对比,代码如下:

<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
                        label="日期"
                        header-align="center">
                    <el-row>今天</el-row>
                    <el-row>昨天</el-row>
                </el-table-column>

                <el-table-column
                        prop="firstLogin"
                        label="首登设备"
                        width="180"
                        header-align="center">
                    <template slot-scope="scope">
                        <el-row prop='today'>{{ scope.row.firstLogin.today }}</el-row>
                        <el-row prop='yesterday'>{{ scope.row.firstLogin.yesterday }}</el-row>
                    </template>
                </el-table-column>

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

                <el-table-column
                        prop="todayLoginUser"
                        label="当日登录用户"
                        header-align="center">
                    <template slot-scope="scope">
                        <el-row prop='today'>{{ scope.row.todayLoginUser.today }}</el-row>
                        <el-row prop='yesterday'>{{ scope.row.todayLoginUser.yesterday }}</el-row>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="todayLoginNumber"
                        label="当日登录次数"
                        header-align="center">
                    <template slot-scope="scope">
                        <el-row prop='today'>{{ scope.row.todayLoginNumber.today }}</el-row>
                        <el-row prop='yesterday'>{{ scope.row.todayLoginNumber.yesterday }}</el-row>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="todaySumPay"
                        label="当日总付费"
                        header-align="center">
                    <template slot-scope="scope">
                        <el-row prop='today'>{{ scope.row.todaySumPay.today }}</el-row>
                        <el-row prop='yesterday'>{{ scope.row.todaySumPay.yesterday }}</el-row>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="arpu"
                        label="ARPU"
                        header-align="center">
                    <template slot-scope="scope">
                        <el-row prop='today'>{{ scope.row.arpu.today }}</el-row>
                        <el-row prop='yesterday'>{{ scope.row.arpu.yesterday }}</el-row>
                    </template>
                </el-table-column>
                
                <el-table-column
                        prop="arppu"
                        label="ARPPU"
                        header-align="center">
                    <template slot-scope="scope">
                        <el-row prop='today'>{{ scope.row.arppu.today }}</el-row>
                        <el-row prop='yesterday'>{{ scope.row.arppu.yesterday }}</el-row>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</div>

<script>
const data = {"today":[{"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['today']
            };
        },
        methods: {
            rowStyle(){
                return "text-align:center"
            }
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐