由于后端是多人開發(fā)，也沒有規(guī)范數(shù)據(jù)格式，所有頁面是我一個(gè)人開發(fā)，所以就會(huì)遇到同樣的頁面不同的返回?cái)?shù)據(jù)格式問題。
一、根據(jù)element文檔，利用prop屬性綁定對應(yīng)值，label綁定表頭。
html
|
1
2
3
4
5
|
<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ù)類型
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
data(): { return: { cols:[ {prop: "327", label: "護(hù)士"}, {prop: "328", label: "護(hù)理員組長"}, {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)相對應(yīng)。
html
|
1
2
3
4
5
|
<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ù)類型
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
data(): { return: { // 表頭數(shù)據(jù) table_head:["護(hù)士", "護(hù)理員組長", "護(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)我們在使用element-ui的時(shí)候，常常用到表格，有表格就會(huì)有篩選。
這個(gè)時(shí)候往往會(huì)在表格上方使用篩選機(jī)的方式來實(shí)現(xiàn)篩選
像這樣，但是一旦篩選條件增多，這個(gè)篩選機(jī)就會(huì)越來越長。這一點(diǎn)都不酷。
所以這邊使用element提供的filters功能。
看了一下往上都說只能對已經(jīng)有的數(shù)據(jù)進(jìn)行篩選，不能后臺(tái)篩選。
？？？不分頁的數(shù)據(jù)到無所謂，我一個(gè)分頁的數(shù)據(jù)，一頁10條，難不成前端篩選第一頁顯示3條，第二頁顯示5條？？
excuse me？
上代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<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)簽" 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: { // 這里使用一個(gè)init的方法來模擬異步獲取數(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 的方法，改寫這個(gè)方法 filterTag(value, row, column) { return true }, // table 的方法 // filter 的格式 obj { column-key: Array } // Array[0] 篩選的值 fnFilterChangeInit(filter){ // do something // example 這里最好用if，沒有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)表頭操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/weixin_43549408/article/details/85329311
