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
| // 定义table组件
| Vue.component('primary-table', {
| props:{
| cols: {
| type: Array,
| default: function() {
| return []
| }
| },
| rows:{
| type: Array,
| default: function() {
| return []
| }
| }
| },
| template: '<div class="card primary-table data-table data-table-border data-table-collapsible data-table-init">\
| <div class="card-content">\
| <table>\
| <thead>\
| <tr>\
| <th class="numeric-cell"\
| v-for="col in cols"\
| :key="col.key">{{col.title}}</th>\
| </tr>\
| </thead>\
| <tbody>\
| <tr v-for="row in rows">\
| <td class="numeric-cell"\
| v-for="col in cols"\
| :key="col.key"\
| v-bind:data-collapsible-title="col.title">{{col.key|getRowVal(row)}}</td>\
| <td v-if="rows.length>1" class="numeric-cell"></td>\
| </tr>\
| </tbody>\
| </table>\
| </div>\
| </div>',
| filters: {
| getRowVal: function(key, row) {
| var result = '';
| if(row[key] != undefined) {
| result = row[key];
| }
|
| return result;
| }
| }
| });
|
|
