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

一、根據element文檔，利用prop屬性綁定對應值，label綁定表頭。

html

<el-table 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='標簽' :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)表頭操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。