Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設置動態(tài)表頭操作

更新時間：2020年09月21日 09:15:31 作者：zhangXY_

這篇文章主要介紹了Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設置動態(tài)表頭操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

由于后端是多人開發(fā)，也沒有規(guī)范數(shù)據(jù)格式，所有頁面是我一個人開發(fā)，所以就會遇到同樣的頁面不同的返回數(shù)據(jù)格式問題。

一、根據(jù)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>

返回的數(shù)據(jù)類型

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"},
   ]
  }
}

二、返回的數(shù)據(jù)都是數(shù)組形式，值與表頭按照數(shù)組下標相對應。

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>

返回的數(shù)據(jù)類型

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

補充知識：element-ui table 表頭filter 使用實現(xiàn)重新向后臺獲取數(shù)據(jù)

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

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

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

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

看了一下往上都說只能對已經有的數(shù)據(jù)進行篩選，不能后臺篩選。

？？？不分頁的數(shù)據(jù)到無所謂，我一個分頁的數(shù)據(jù)，一頁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的方法來模擬異步獲取數(shù)據(jù)懂這個意思就好
   // 假裝接受options作為篩選條件
   init(options){
    this.tableData = [{
     date: '2016-05-02',
     name: '王小虎',
     address: '上海市普陀區(qū)金沙江路 1518 弄',
     tag: '家'
    }, {
     date: '2016-05-04',
     name: '王小虎',
     address: '上海市普陀區(qū)金沙江路 1517 弄',
     tag: '公司'
    }, {
     date: '2016-05-01',
     name: '王小虎',
     address: '上海市普陀區(qū)金沙江路 1519 弄',
     tag: '家'
    }, {
     date: '2016-05-03',
     name: '王小虎',
     address: '上海市普陀區(qū)金沙江路 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 根據(jù)后臺返回數(shù)據(jù)設置動態(tài)表頭操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: