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

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

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

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

一、根據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-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: '上海市普陀區(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 根據后臺返回數據設置動態(tài)表頭操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue3結合hooks開發(fā)可以注冊的二次確認彈框
這篇文章主要為大家介紹了vue3結合hooks開發(fā)可以注冊的二次確認彈框，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
Vue實現五子棋小游戲
這篇文章主要為大家詳細介紹了Vue實現五子棋小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-05-05
vue前端信息詳情頁模板梳理詳解
這篇文章主要為大家詳細介紹了vue前端信息詳情頁模板梳理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue3.0安裝Element?ui及矢量圖使用方式
這篇文章主要介紹了vue3.0安裝Element?ui及矢量圖使用,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-12-12
淺談Vue響應式(數組變異方法)
這篇文章主要介紹了淺談Vue響應式(數組變異方法)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
Vue+Router+Element實現簡易導航欄
這篇文章主要為大家詳細介紹了Vue+Router+Element實現簡易導航欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
vue組件開發(fā)props驗證的實現
這篇文章主要介紹了vue組件開發(fā)props驗證的實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
Vue和React有哪些區(qū)別
這篇文章主要介紹了Vue和React有哪些區(qū)別，幫助大家更好的理解和學習JavaScript框架，感興趣的朋友可以了解下
2020-09-09
Vue(element ui)中操作row參數的使用方式
這篇文章主要介紹了Vue(element ui)中操作row參數的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-04-04
詳解關于Vuex的action傳入多個參數的問題
這篇文章主要介紹了詳解關于Vuex的action傳入多個參數的問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02