Vue element table動態生成列

• 需求

前端頁面使用的vue的element-ui。需要實現的需求如下圖：用戶頁面選擇起始運距和運距間隔后，服務器動態生成運距和對應的運輸車數列表。　　

 

• 實現方法

 element  table組件的render-header函數屬性。 這個函數是專門用作渲染表格的列表頭的。用法如下：

　　

　　1.在data區定義header

data{
　　return{
　　　　//動態列頭header
      header:[]
    
    }
}    

 

　　2.設置表格屬性：render-header="labelHead",函數名 labelHead 可以自己起名。

　　<el-table v-if="wideTable" v-loading="loading"  :data="checkLogList" :render-header="labelHead" :border="true">

　　　

　　3.寫render-header的回調函數。請忽略下面的注釋，但是，返回值必須是要h('span',)這個格式的，關於這個函數的具體研究可以參考這里 https://segmentfault.com/a/1190000016364550，查看vue的官方文檔

labelHead(h,{column,index}){ //動態表頭渲染
      //let l = column.label.length;
      //let f = 12; //每個字大小,其實是每個字的比例值,大概會比字體大小打差不多大
      //column.minWidth = f * l; //字大小乘個數即長度 ,注意不要加px像素，這里minWidth只是一個比例值，不是真正的長度
      //然后將列標題放在一個div塊中，注意塊的寬度一定要100%，否則表格顯示不完全
      return h('span',{class:'table-head',style:{width:'100%'}},[column.label])
    }

　　　　

　　　　4.在你需要header的方法里把后台返回的數據填充到header里。

methods: {
    /** 查詢用戶列表 */
    getList() {
      this.loading = true;
      listCheckLog(this.addDateMonth(this.queryParams, this.month)).then(response => {
          this.checkLogList = response.rows;
          // 在這里將后台返回的列表頭數據直接放到之前定義好的header數組中
          this.header = this.checkLogList[0].header;
          this.total = response.total;
          this.loading = false;
        }
      );
    }
}

　　　

　　　5.最關鍵的是在需要生成動態列的地方遍歷header數組，生成列。同時在行內遍歷與表頭具有對應關系的另一個數據填充列表。在index相等的時候將數據填充到對應的列下

<el-table-column :label="item" v-for="(item, index) in header" :key="item"  align="center">
          <template slot-scope="scope">
              <span v-for="(item2,index2) in scope.row.transportNumByDistance" v-if="index2 == index"> {{ scope.row.transportNumByDistance[index2].transportNum }} </span>
           </template>
 </el-table-column>

• 完成后的效果圖