vue+elementui实现表头根据后台数据动态生成字段

有时需求涉及表头动态加载 ，肯定是涉及渲染了
代码如：

 cols: [
                { label: "节点编号", prop: "node", type: "normal" },
                { label: "名称", prop: "name", type: "normal" },
                { label: "类型", prop: "type", type: "sort" },
                { label: "坐标", prop: "coordinate", type: "normal" }
            ]

prop属性设定的值肯定是表头绑定的 属性，表格数据当然是以prop值作为绑定表格属性

<template>
    <div>
        <el-table class="tb-edit" highlight-current-row :data="tableData" style="width: 100%">
 
            <template v-for="(col ,index) in cols">
                <el-table-column v-if="col.type==='normal'" :prop="col.prop" :label="col.label"></el-table-column>
                <el-table-column v-if="col.type==='sort'" :prop="col.prop" sortable :label="col.label">
                    <template slot-scope="scope">
                        <el-tag type="primary">{{ scope.row.type }}</el-tag>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <br>数据:{{tableData}}
    </div>
</template>
<script>
export default {
    data() {
        return {
            // cols prop属性值都是作为 tableData的属性
            cols: [
                { label: "节点编号", prop: "node", type: "normal" },
                { label: "名称", prop: "name", type: "normal" },
                { label: "类型", prop: "type", type: "sort" },
                { label: "坐标", prop: "coordinate", type: "normal" }
            ],
            tableData: [
                {
                    node: "0051",
                    name: " 机库顶",
                    type: "UWB",
                    status: "正常",
                    coordinate: "12.21,34.45,34.6"
                },
                {
                    node: "0061",
                    name: "机库门",
                    type: "GPS",
                    status: "低电",
                    coordinate: "45.41,67.45,78.6"
                }
            ]
        };
    },
    methods: {
        handleCurrentChange(row, event, column) {
            console.log(row, event, column, event.currentTarget);
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        }
    }
};
</script>

这个是我在项目中的遇到的：
效果图：

代码：html

  <el-main style="margin-top:-30px;" v-show="lis_show">
            <h3 style="float:left">月度汇总</h3>
            <el-button class="filter-item" style="margin-left: 10px;float:right" @click="handleExport" type="primary">导出</el-button>
            <el-table :data="tableData1"  border fit highlight-current-row
              style="width:100%;margin-top:8px"  :header-cell-style="{background:'#199ED8'}">
              <template v-for="(col,key) in cols1">
                <el-table-column v-if="col.prop==='sum'" align="center" :prop="col.prop" :label="col.label"></el-table-column>
                <el-table-column v-else="col.prop==col.label" align="center" :prop="col.prop" :label="col.label.substring(8,10)"></el-table-column>//*这个做了处理*
            </template> 
          </el-table>
          </el-main>

          <el-main v-show="lis_show">
             <h3 style="float:left">产品汇总</h3>
             <el-button class="filter-item" style="margin-left: 10px;float:right" @click="hadeExcst" type="primary">导出</el-button>
             <el-table :data="tableData2"  border fit highlight-current-row
              style="width:100%;margin-top:8px"  :header-cell-style="{background:'#199ED8'}">
               <template v-for="col in cols2">
                <el-table-column v-if="col.prop==='part_name'" align="center" :prop="col.prop" :label="col.label"></el-table-column>   
                <el-table-column v-if="col.prop==='part_or_product'" align="center" :prop="col.prop" :label="col.label"></el-table-column>   
                <el-table-column v-if="col.prop==='part_code'" align="center" :prop="col.prop" :label="col.label"></el-table-column>
                <el-table-column v-if="col.prop==='sum'" align="center" :prop="col.prop" :label="col.label">
                   <template slot-scope="scope">
                        <span class="link-type futiop" @click="ppp(scope.row,col.prop)">{{scope.row.sum}}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="col.prop==col.label" align="center" :prop="col.prop"  :label="col.label.substring(8,10)">
                    <template slot-scope="scope">
                        <span class="link-type futiop" @click="ppp(scope.row,col.prop)">{{scope.row[col.prop]}}</span>
                    </template>
                </el-table-column>
            </template> 
          </el-table>
          </el-main>
          <!-- 底栏容器 -->
          <el-footer v-show="lis_show">
            <div class="pagination-container">
              <el-pagination background 
              @size-change="handleSizeChange" 
              @current-change="handleCurrentChange" 
              :current-page="listQuery.pageNum" 
              :page-sizes="[5,10,15,20]" 
              :page-size="listQuery.pageSize" 
              layout="total, sizes, prev, pager, next, jumper" 
              :total="top_total">
              </el-pagination>
            </div>
          </el-footer>

js

// 月度汇总
        mouthAA(){
         mouthList(this.listQuery).then(response =>{
           var pos={ label: "", prop: "node1" }
           this.cols1 = response.data.data.column
           this.cols1.unshift(pos)
           var zhilist = response.data.data.result
           zhilist['node1'] = "总计"
           this.tableData1 = []
           this.tableData1.push(zhilist)
         })
        },
        //汇总
        aggregateAA(){
          poolList(this.listQuery).then(response => {
           if (response.data.code == 200) {
             this.cols2 = response.data.data.column
             this.tableData2 = response.data.data.result
             this.top_total = response.data.data.total
             }else {
              this.$notify({
              title: '警告',
              message: response.data.msg,
              type: 'warning',
              duration: 3000
            })
          }
        })
       },