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

一、根據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: ’上海市普陀區金沙江路 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 根據后臺返回數據設置動態表頭操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。