由於後端是多人開發，也沒有規範資料格式，所有頁面是我一個人開發，所以就會遇到同樣的頁面不同的返回資料格式問題。

一、根據element文件，利用prop屬性繫結對應值，label繫結表頭。

html

<el-table class="tb-edit" highlight-current-row :data="tableData" border style="width: 100%">         
 <template v-for="(col,index) in cols">          
 <el-table-column :prop="col.prop" :label="col.label"></el-table-column>        
 </template>       
</el-table>

返回的資料型別

data(): {
  return: {
    cols:[
      {prop: "327",label: "護士"},{prop: "328",label: "護理員組長"},{prop: "329",label: "護理員"},{prop: "330",label: "輸單員"}
   ],tableData:[
     {327: "24",328: "20",329: "18",330: "2"},{327: "22",{327: "51",328: "21",329: "20",330: "6"},{327: "21",]
  }
}

二、返回的資料都是陣列形式，值與表頭按照陣列下標相對應。

html

<el-table :data="table_content" border>        
 <el-table-column :label="val" v-for="(val,i) in table_head" :key="i">           
 <template slot-scope="scope">{{table_content[scope.$index][i]}}</template>        
 </el-table-column>       
</el-table>

返回的資料型別

data(): {
 return: {
 // 表頭資料
 table_head:["護士","護理員組長","護理員","輸單員"],// 表格內容資料
 table_content:[
   ["24","20","18","2"],["22",["51","21","6"],["21",],}
}

補充知識：element-ui table 表頭filter 使用實現重新向後臺獲取資料

描述：當我們在使用element-ui的時候，常常用到表格，有表格就會有篩選。

這個時候往往會在表格上方使用篩選機的方式來實現篩選

像這樣，但是一旦篩選條件增多，這個篩選機就會越來越長。這一點都不酷。

所以這邊使用element提供的filters功能。

看了一下往上都說只能對已經有的資料進行篩選，不能後臺篩選。

？？？不分頁的資料到無所謂，我一個分頁的資料，一頁10條，難不成前端篩選第一頁顯示3條，第二頁顯示5條？？

excuse me？

上程式碼

<template>
 <el-table
  ref="filterTable"
  :data="tableData"
  @filter-change="fnFilterChangeInit"
  style="width: 100%">
  <el-table-column
   prop="name"
   label="姓名"
   width="180">
  </el-table-column>
  <el-table-column
   prop="address"
   label="地址"
   :formatter="formatter">
  </el-table-column>
  <el-table-column
   prop="tag"
   label="標籤"
   width="100"
   :filters="[{ text: '家',value: '家' },{ text: '公司',value: '公司' }]"
   :filter-method="filterTag"
   column-key="tag"
   filter-placement="bottom-end">
   <template slot-scope="scope">
    <el-tag
     :type="scope.row.tag === '家' ? 'primary' : 'success'"
     disable-transitions>{{scope.row.tag}}</el-tag>
   </template>
  </el-table-column>
 </el-table>
</template>
 
<script>
 export default {
  data() {
   return {
    tableData: [],options:{
      tag: undefined
    }
   }
  },methods: {
   // 這裡使用一個init的方法來模擬非同步獲取資料懂這個意思就好
   // 假裝接受options作為篩選條件
   init(options){
    this.tableData = [{
     date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄',tag: '家'
    },{
     date: '2016-05-04',address: '上海市普陀區金沙江路 1517 弄',tag: '公司'
    },{
     date: '2016-05-01',address: '上海市普陀區金沙江路 1519 弄',{
     date: '2016-05-03',address: '上海市普陀區金沙江路 1516 弄',tag: '公司'
    }]
   },// table column 的方法，改寫這個方法
   filterTag(value,row,column) {
    return true
   },// table 的方法
   // filter 的格式 obj { column-key: Array }
   // Array[0] 篩選的值 
   fnFilterChangeInit(filter){
     // do something
     // example 這裡最好用if，沒有if可以試試也許有奇蹟
     if(filter.tag){
      // 為什麼這麼處理 怕有些同學把undefined當一個字串傳給後臺
      this.options.tag = filter.tag[0] == undefined ? '':filter.tag[0]
     }
     this.init(this.options)
   }
  }
 }
</script>

以上這篇Vue+Element ui 根據後臺返回資料設定動態表頭操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。