Skip to content

Commit 4639c00

Browse files
vvpvvpvvpvvp
committed
feat(table): add prop attrs
Closes #186
1 parent 81c0b9a commit 4639c00

5 files changed

Lines changed: 65 additions & 26 deletions

File tree

‎doc/components/component/table.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
<h3>Table 气泡提示以及自定义行列样式</h3>
4646
<example demo="view/table7"></example>
4747

48-
<h3>自定义表头</h3>
48+
<h3>自定义表头，合并行/列</h3>
4949
<example demo="view/table8"></example>
5050

5151
<h3>Table 参数</h3>
@@ -127,6 +127,13 @@
127127
<td></td>
128128
<td></td>
129129
</tr>
130+
<tr>
131+
<td>attrs</td>
132+
<td>计算 td 的属性, 1.25.0+</td>
133+
<td>Function(data, index)</td>
134+
<td></td>
135+
<td></td>
136+
</tr>
130137
</table>
131138

132139
<h3>TableItem / Column 参数</h3>

‎doc/components/demos/view/table8.vue‎

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,60 @@
11
<template>
22
<div>
3-
<Table border :datas="datas" :columns="columns" :ths="ths" :height="200">
4-
<div slot="empty">自定义提醒：暂时无数据</div>
3+
<Table border :datas="datas" :columns="columns" :ths="ths">
54
</Table>
65
</div>
76
</template>
87

98
<script>
109
export default {
1110
data() {
11+
let attrs = (data, index) => {
12+
return {
13+
colspan: index == 5 ? 0 : 1
14+
};
15+
};
1216
return {
1317
ths: [
1418
[
15-
{ title: '序号', rowspan: 2 },
16-
{ title: '编码', tooltip: true },
17-
{ title: '信息', colspan: 2 },
19+
{ title: 'serial', rowspan: 2 },
20+
{ title: 'coding', tooltip: true },
21+
{ title: 'information', colspan: 2 },
1822
{ title: 'address', rowspan: 2 }
19-
], [
23+
],
24+
[
2025
{ title: 'ID', prop: 'id', sort: 'auto' },
21-
{ title: '姓名' },
22-
{ title: '年龄' }
26+
{ title: 'Name' },
27+
{ title: 'age' }
2328
]
2429
],
2530
columns: [
26-
{ prop: 'index', width: 100 },
27-
{ prop: 'id', width: 100 },
28-
{ prop: 'name', width: 100 },
29-
{ prop: 'age', width: 100 },
30-
{ prop: 'address', width: 150 }
31+
{ prop: 'index',
32+
width: 100,
33+
attrs(data, index) {
34+
return {
35+
colspan: index == 5 ? 5 : 1
36+
};
37+
} },
38+
{ prop: 'id',
39+
width: 100,
40+
attrs(data, index) {
41+
return {
42+
rowspan: index < 4 ? (index % 2 == 0 ? 2 : 0) : 1,
43+
colspan: index == 5 ? 0 : 1
44+
};
45+
} },
46+
{ prop: 'name', width: 100, attrs },
47+
{ prop: 'age', width: 100, attrs },
48+
{ prop: 'address', width: 150, attrs }
3149
],
3250
datas: [
33-
{ index: 1, id: 'abc1', name: '测试1', age: 1, address: '上海1', address2: '上海21' },
34-
{ index: 2, id: 'abc2', name: '测试2', age: 2, address: '上海2', address2: '上海22' },
35-
{ index: 3, id: 'abc3', name: '测试3', age: 3, address: '上海3', address2: '上海23' },
36-
{ index: 4, id: 'abc4', name: '测试4', age: 4, address: '上海4', address2: '上海24' },
37-
{ index: 5, id: 'abc5', name: '测试5', age: 5, address: '上海5', address2: '上海25' },
38-
{ index: 6, id: 'abc6', name: '测试6', age: 6, address: '上海6', address2: '上海26' },
39-
{ index: 7, id: 'abc7', name: '测试7', age: 7, address: '上海7', address2: '上海27' },
40-
{ index: 8, id: 'abc8', name: '测试8', age: 8, address: '上海8', address2: '上海28' },
41-
{ index: 9, id: 'abc9', name: '测试9', age: 9, address: '上海9', address2: '上海29' }
51+
{ index: 1, id: 'abc1', name: 'Test 1', age: 1, address: 'Shanghai 1', address2: 'Shanghai 21' },
52+
{ index: 2, id: 'abc2', name: 'Test 2', age: 2, address: 'Shanghai 2', address2: 'Shanghai 22' },
53+
{ index: 3, id: 'abc3', name: 'Test 3', age: 3, address: 'Shanghai 3', address2: 'Shanghai 23' },
54+
{ index: 4, id: 'abc4', name: 'Test 4', age: 4, address: 'Shanghai 4', address2: 'Shanghai 24' },
55+
{ index: 5, id: 'abc5', name: 'Test 5', age: 5, address: 'Shanghai 5', address2: 'Shanghai 25' },
56+
{ index: 6, id: 'abc6', name: 'Test 6', age: 6, address: 'Shanghai 6', address2: 'Shanghai 26' },
57+
{ index: 7, id: 'abc7', name: 'Test 7', age: 7, address: 'Shanghai 7', address2: 'Shanghai 27' }
4258
]
4359
};
4460
},

‎doc/components_en/component/table.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@
4848
<h3>Table bubble tips and custom style</h3>
4949
<exampleEn demo="view/table7"></exampleEn>
5050

51-
<h3>Custom table header</h3>
52-
<exampleEn demo="view/table8"></exampleEn>
51+
<h3>Custom table header, colspan, rowspan</h3>
52+
<example demo="view/table8"></example>
5353

5454
<h3>Table 参数</h3>
5555
<table class="table">
@@ -137,6 +137,13 @@
137137
<td></td>
138138
<td></td>
139139
</tr>
140+
<tr>
141+
<td>attrs</td>
142+
<td>Computed td attributes,1.25.0+</td>
143+
<td>Function(data, index)</td>
144+
<td></td>
145+
<td></td>
146+
</tr>
140147
</table>
141148

142149
<h3>TableItem / Column Property</h3>

‎src/components/table/tableitem.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export default {
1313
fixed: String,
1414
label: String,
1515
prop: String,
16+
attrs: Function,
1617
dict: String,
1718
align: String,
1819
className: String,

‎src/components/table/tabletd.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<td :class="cls">
2+
<td :class="cls" v-bind="tdAttrs" v-if="tdAttrs.colspan !== 0 && tdAttrs.rowspan !== 0 ">
33
<span class="h-table-tree-expand" v-if="treeOpener" :class="{'h-table-tree-opened': data._opened}">
44
<i v-for="index of level" :key="index" class="h-table-tree-expand-space"></i>
55
<i class="h-table-tree-icon h-icon-angle-right" @click="toggleTree" v-if="data.children && data.children.length"></i>
@@ -19,6 +19,7 @@ export default {
1919
dict: String,
2020
data: [Object, Array],
2121
align: String,
22+
attrs: Function,
2223
unit: String,
2324
render: Function,
2425
format: Function,
@@ -34,6 +35,13 @@ export default {
3435
}
3536
},
3637
computed: {
38+
tdAttrs() {
39+
let attrs = {};
40+
if (this.attrs) {
41+
attrs = this.attrs.call(null, this.data, this.index);
42+
}
43+
return attrs;
44+
},
3745
level() {
3846
return this.data._level || 0;
3947
},

0 commit comments

Comments
 (0)