动态添加表格列,而且进行数据渲染

在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

相关文章
相关标签/搜索