2cb8a6d9
 梁灏
commit Table comp...
|
1
2
|
<template>
<div :class="classes">
|
|
744eb0af
梁灏
update Table comp...
|
3
4
|
<div :class="[prefixCls + '-header']">
<table cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth + 'px'}">
|
|
2cb8a6d9
梁灏
commit Table comp...
|
5
|
<colgroup>
|
|
744eb0af
梁灏
update Table comp...
|
6
|
<col v-for="column in columns" :width="setCellWidth(column, $index)">
|
|
2cb8a6d9
梁灏
commit Table comp...
|
7
8
9
10
11
|
</colgroup>
<thead
is="table-head"
:prefix-cls="prefixCls + '-thead'"
:columns="columns"></thead>
|
|
744eb0af
梁灏
update Table comp...
|
12
13
14
15
16
17
18
|
</table>
</div>
<div :class="[prefixCls + '-body']">
<table cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth + 'px'}" v-el:tbody>
<colgroup>
<col v-for="column in columns" :width="setCellWidth(column, $index)">
</colgroup>
|
|
2cb8a6d9
梁灏
commit Table comp...
|
19
20
21
22
23
24
25
26
27
28
29
|
<tbody :class="[prefixCls + '-tbody']" v-el:render>
<tr :class="[prefixCls + '-row']" v-for="(index, row) in data">
<td v-for="column in columns">{{{ renderRow(row, column) }}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import TableHead from './table-head.vue';
|
|
744eb0af
梁灏
update Table comp...
|
30
|
import { oneOf, getStyle } from '../../utils/assist';
|
|
2cb8a6d9
梁灏
commit Table comp...
|
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
|
const prefixCls = 'ivu-table';
export default {
components: { TableHead },
props: {
data: {
type: Array,
default () {
return []
}
},
columns: {
type: Array,
default () {
return []
}
},
size: {
validator (value) {
return oneOf(value, ['small', 'large']);
}
},
stripe: {
type: Boolean,
default: false
},
border: {
type: Boolean,
default: false
},
fit: {
type: Boolean,
default: true
},
showHeader: {
type: Boolean,
default: true
},
selection: {
validator (value) {
return oneOf(value, ['single', 'multiple', false]);
},
default: false
},
showIndex: {
type: Boolean,
default: false
}
},
data () {
return {
|
|
744eb0af
梁灏
update Table comp...
|
82
83
|
tableWidth: 0,
columnsWidth: [],
|
|
2cb8a6d9
梁灏
commit Table comp...
|
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
prefixCls: prefixCls,
compiledUids: []
}
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.size}`]: !!this.size
}
]
}
},
methods: {
renderRow (row, column) {
return 'render' in column ? '' : row[column.key];
},
compileRender (update = false) {
this.$nextTick(() => {
if (update) {
for (let i = 0; i < this.$parent.$children.length; i++) {
const index = this.compiledUids.indexOf(this.$parent.$children[i]._uid);
if (index > -1) {
this.$parent.$children[i].$destroy();
this.compiledUids.splice(index, 1);
i--;
}
}
}
const $el = this.$els.render;
for (let i = 0; i < this.columns.length; i++) {
const column = this.columns[i];
if (column.render) {
for (let j = 0; j < this.data.length; j++) {
|
|
744eb0af
梁灏
update Table comp...
|
120
|
// todo 做一个缓存，只在需要改render时再重新编译，否则data改变时不用再编译
|
|
2cb8a6d9
梁灏
commit Table comp...
|
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
const row = this.data[j];
const template = column.render(row, column, j);
const cell = document.createElement('div');
cell.innerHTML = template;
const _oldParentChildLen = this.$parent.$children.length;
this.$parent.$compile(cell);
const _newParentChildLen = this.$parent.$children.length;
if (_oldParentChildLen !== _newParentChildLen) { // if render normal html node, do not tag
this.compiledUids.push(this.$parent.$children[this.$parent.$children.length - 1]._uid); // tag it, and delete when data or columns update
}
$el.children[j].children[i].innerHTML = '';
$el.children[j].children[i].appendChild(cell);
}
}
}
|
|
744eb0af
梁灏
update Table comp...
|
137
|
this.handleResize();
|
|
2cb8a6d9
梁灏
commit Table comp...
|
138
|
});
|
|
744eb0af
梁灏
update Table comp...
|
139
140
141
142
143
144
145
146
147
148
149
150
|
},
handleResize () {
this.tableWidth = parseInt(getStyle(this.$el, 'width'));
this.$nextTick(() => {
this.columnsWidth = [];
this.$els.tbody.querySelectorAll('tbody tr')[0].querySelectorAll('td').forEach((cell) => {
this.columnsWidth.push(parseInt(getStyle(cell, 'width')));
});
});
},
setCellWidth (column, index) {
return column.width ? column.width : this.columnsWidth[index];
|
|
2cb8a6d9
梁灏
commit Table comp...
|
151
152
153
154
|
}
},
ready () {
this.compileRender();
|
|
744eb0af
梁灏
update Table comp...
|
155
156
157
158
|
window.addEventListener('resize', this.handleResize, false);
},
beforeDestroy () {
window.removeEventListener('resize', this.handleResize, false);
|
|
2cb8a6d9
梁灏
commit Table comp...
|
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
},
watch: {
data: {
handler () {
this.compileRender(true);
},
deep: true
},
columns: {
handler () {
this.compileRender(true);
},
deep: true
}
}
}
</script>
|
