在element ui中提供了表格的基本操作,现在需要 根据查询条件月份范围 来展示表格的列。处理方式如下:
html文件:
<el-table v-loading="loading" :data="dataList" border height="500">
<el-table-column type="index" align="center" label="序号" width="55"></el-table-column>
<el-table-column align="center" label="4S店" prop="shopName" min-width="100"></el-table-column>
<template v-for="item in items">
<el-table-column align="center" :label="item.month" :key="item.month">
<el-table-column align="center" label="订单数" sortable="custom" min-width="80" :prop="item.month+'_d'">
<template slot-scope="scope">
<template v-for="itemDes in scope.row.items">
<p v-if="itemDes.month===item.month">{{itemDes.orderNum}}</p>
</template>
</template>
</el-table-column>
<el-table-column align="center" label="金额" sortable="custom" min-width="80" :prop="item.month+'_j'">
<template slot-scope="scope">
<template v-for="itemDes in scope.row.items">
<p v-if="itemDes.month===item.month" class="link">{{itemDes.orderPrice}}</p>
</template>
</template>
</el-table-column>
</el-table-column>
</template>
<el-table-column align="center" label="查询结果合计">
<el-table-column align="center" label="订单数" prop="orderNum1" sortable="custom" min-width="80">
<template slot-scope="scope">
<p>{{scope.row.orderNum1}}</p>
</template>
</el-table-column>
<el-table-column align="center" label="金额" prop="orderPrice1" sortable="custom" min-width="80">
<template slot-scope="scope">
<p class="link">{{scope.row.orderPrice1}}</p>
</template>
</el-table-column>
</el-table-column>
</el-table>
前后都是固定的展示,中间展示月份数据时,根据查询月份的范围展示,默认展示7个月份的数据。
后端接口返回数据以后,需要把月份、订单数、金额组成一个对象。放到一个数组items中,同时需要把数据放到表格data属性中。
loadTableData() { this.dataList = []; this.items = []; let itemsTemp = {'month':'2018-08','orderNum':'9','orderPrice':'230.5'}; let itemsTemp2 = {'month':'2018-09','orderNum':'15','orderPrice':'4167.5'}; this.items.push(itemsTemp); this.items.push(itemsTemp2); let temp = {shopName:'西湖4S店',items:this.items, orderNum1:'1',orderPrice1:'1'}; this.dataList.push(temp); }
得到的效果如下图所示:

