【element】element-ui 表格单行中显示多行,即一行显示两行的问题
element 一行中展示两行的问题
·
先来一个节目效果
可以看到图中表格一行中显示了两行的效果,渠道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>
更多推荐
已为社区贡献1条内容
所有评论(0)