在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