動態添加表格列,而且進行數據渲染

在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

相關文章
相關標籤/搜索