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

在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);
}

得到的效果如下图所示:

 

posted @ 2018-10-12 15:55  yiyiboy-原点  阅读(1887)  评论(0编辑  收藏  举报