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值作为绑定表格属性

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

代码：html

  
            
月度汇总
            导出
            
               
          
          

          
             
产品汇总
             导出
             
                
          
          
          
          
            

              
              
            
          

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
            })
          }
        })
       },