由于后端是多人開(kāi)發(fā)，也沒(méi)有規(guī)范數(shù)據(jù)格式，所有頁(yè)面是我一個(gè)人開(kāi)發(fā)，所以就會(huì)遇到同樣的頁(yè)面不同的返回?cái)?shù)據(jù)格式問(wèn)題。

一、根據(jù)element文檔，利用prop屬性綁定對(duì)應(yīng)值，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>

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

data(): { return: { cols:[ {prop: '327', label: '護(hù)士'}, {prop: '328', label: '護(hù)理員組長(zhǎng)'}, {prop: '329', label: '護(hù)理員'}, {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ù)組下標(biāo)相對(duì)應(yīng)。

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:['護(hù)士', '護(hù)理員組長(zhǎng)', '護(hù)理員', '輸單員'], // 表格內(nèi)容數(shù)據(jù) table_content:[ ['24', '20', '18', '2'], ['22', '20', '18', '2'], ['22', '20', '18', '2'], ['51', '21', '20', '6'], ['21', '20', '18', '2'], ], }}

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

描述：當(dāng)我們?cè)谑褂胑lement-ui的時(shí)候，常常用到表格，有表格就會(huì)有篩選。

這個(gè)時(shí)候往往會(huì)在表格上方使用篩選機(jī)的方式來(lái)實(shí)現(xiàn)篩選

像這樣，但是一旦篩選條件增多，這個(gè)篩選機(jī)就會(huì)越來(lái)越長(zhǎng)。這一點(diǎn)都不酷。

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

看了一下往上都說(shuō)只能對(duì)已經(jīng)有的數(shù)據(jù)進(jìn)行篩選，不能后臺(tái)篩選。

？？？不分頁(yè)的數(shù)據(jù)到無(wú)所謂，我一個(gè)分頁(yè)的數(shù)據(jù)，一頁(yè)10條，難不成前端篩選第一頁(yè)顯示3條，第二頁(yè)顯示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='標(biāo)簽' :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: { // 這里使用一個(gè)init的方法來(lái)模擬異步獲取數(shù)據(jù)懂這個(gè)意思就好 // 假裝接受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 的方法，改寫(xiě)這個(gè)方法 filterTag(value, row, column) { return true }, // table 的方法 // filter 的格式 obj { column-key: Array } // Array[0] 篩選的值 fnFilterChangeInit(filter){ // do something // example 這里最好用if，沒(méi)有if可以試試也許有奇跡 if(filter.tag){ // 為什么這么處理 怕有些同學(xué)把undefined當(dāng)一個(gè)字符串傳給后臺(tái) this.options.tag = filter.tag[0] == undefined ? ’’:filter.tag[0] } this.init(this.options) } } }</script>

以上這篇Vue+Element ui 根據(jù)后臺(tái)返回?cái)?shù)據(jù)設(shè)置動(dòng)態(tài)表頭操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。