element-ui table表格表头项动态渲染

最新推荐文章于 2024-06-17 09:12:49 发布

御风傲天

最新推荐文章于 2024-06-17 09:12:49 发布

阅读量3.3k

点赞数 2

分类专栏： element 文章标签： vue.js element elementui

本文链接：https://blog.csdn.net/yufengaotian/article/details/121442848

版权

element 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

根据后端返回数据，动态渲染table

<el-table 
          :data="dataList"
          show-summary
          :summary-method="getSummaries"
          class="myTable"
      >
          <template slot="empty">
            <empty-in-table></empty-in-table>
          </template>
          <!-- 合计字段可以排序 -->
          <el-table-column v-for="(head,index) in tableHeader" 
              :key="index" 
              :label="head.label" 
              :prop="head.key"
              :sortable="head.key == 'total_cost'"
            >
            <template slot-scope="scope">
                <span v-if="head.key.includes('cost')">{{'￥'+scope.row[head.key]}}</span>
                <span v-else>{{scope.row[head.key]}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="ts-page-block">
             <pagination
                :paginationData="pagination"
                @handleCurrentChange="handleCurrentChange"
                @handleSizeChange="handleSizeChange"
                >
             </pagination>
        </div>

请求接口数据：

getListData(obj){
            let { selectVal, dateVal, dep_name } = obj || this;
            console.log(dateVal);
            let { current_page,  per_page } = obj || this.pagination;
            let parm = {
                statistical_type: selectVal,
                statistical_period: moment(dateVal).format("YYYY-MM-DD"),
                current_page,
                per_page,
                pay_type: 1, // 付费方式:转售付费1；包年包月2；按需付费3；包年包月+按需付费4
                dep_name: selectVal == 'app' ? dep_name : '', // 部门赛选,只有维度为应用系统时
            };
            requestMethod.getChargeList('get', parm).then(res => {
                if(res.code == 200){
                    this.tableHeader = res.data.item.table_name_head;
                    this.dataList = res.data.item.table_body;
                    this.tableTotal = res.data.item.sum_cha_list;
                    if(selectVal == 'app'){
                        this.depArr =  this.depArr.length > 0 ? this.depArr : res.data.item.table_body.map(item => item.dep_name);
                    } else {
                        this.depArr = [];
                    }
                }else{
                    this.$message.error(res.message);
                }
            })
        },