Vue+Element uiバックグラウンドリターンデータに基づいて動的なヘッダ操作を設定します。

バックエンドは多くの人が開発していますので、データフォーマットも規範化されていません。すべてのページは私一人で開発しています。だから、同じページとは違ってデータフォーマットの問題に戻ります。
一、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", 328: "20", 329: "18", 330: "2"},
     {327: "22", 328: "20", 329: "18", 330: "2"},
     {327: "51", 328: "21", 329: "20", 330: "6"},
     {327: "21", 328: "20", 329: "18", 330: "2"},
   ]
  }
}

二、返したデータはすべて行列形式で、値は表のヘッダと配列下付きで対応します。
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", "20", "18", "2"],
   ["22", "20", "18", "2"],
   ["51", "21", "20", "6"],
   ["21", "20", "18", "2"],
 ],
 
 }
}

補足知識：element-uitableのヘッダfilterを使用して、バックグラウンドにデータを再取得することを実現します。
説明：私達はelement-uiを使う時、よく表を使います。表があればフィルタがあります。
このときは表の上にフィルターを使ってフィルタリングを行います。

このように、スクリーニング条件が増えると、このスクリーニングマシンはどんどん長くなります。これは全然かっこよくないです。
ここではelementが提供するfilters機能を使います。
見て上に行くと、すでにあったデータをフィルタするしかないと言っています。バックグラウンドでフィルタできません。
？改ページされていないデータは大丈夫です。私は改ページのデータを一つずつ10ページにします。最初のページを選別して3条を表示します。2ページ目は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',
     name: '   ',
     address: '           1517  ',
     tag: '  '
    }, {
     date: '2016-05-01',
     name: '   ',
     address: '           1519  ',
     tag: ' '
    }, {
     date: '2016-05-03',
     name: '   ',
     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はバックグラウンドのデータに基づいて動的なヘッダ操作を設定します。つまり、小編集が皆さんに提供したすべての内容を共有します。