在element ui中提供了表格的基本操做,如今须要 根据查询条件月份范围 来展现表格的列。处理方式以下:html
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属性中。ui
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); }
获得的效果以下图所示:this