tm-table 表格
重要提醒
本组件1.1.2版本新增。
表格组件可以自由控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。 超过指定高度竖向滚动。
不要把它比作专业的表格组件，胜任不了。只能用作业务上的展示用途。
🎉目录导航
👉使用方法,跟数1,2,3一样简单
基本示例
<tm-table @click="test" :list="list2"></tm-table>
1
<script>
export default {
data() {
return {
list2: {
headerBgcolor: 'blue',
header: [
{
text: '1'
},
{
text: '2'
},
{
text: '3'
},
{
text: '4'
},
{
text: '5'
}
],
col: [
[
{
text: '36',
color: ''
},
{
text: '569'
},
{
text: '569'
},
{
text: '569'
},
{
text: '单价'
}
],
[
{
text: '36',
color: ''
},
{
text: '569'
},
{
text: '569'
},
{
text: '569'
},
{
text: '单价'
}
],
[
{
text: '36',
color: ''
},
{
text: '569'
},
{
text: '569'
},
{
text: '569'
},
{
text: '单价'
}
]
]
}
};
},
methods: {
test(e){
uni.showModal({
title:'提示',
content:`列：${e.col},行${e.row},数据为:${JSON.stringify(e.data)}`
})
}
}
};
</script>
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
89
90
91
92
93
94
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
89
90
91
92
93
94
👉完整的示例
可以复制到页面直接运行
<template>
<view>
<tm-menubars title="表格" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
<tm-sheet :shadow="24" :padding="[0, 0]">
<view class="text-size-n pa-24 text-blue">以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。</view>
<tm-table @click="test" :list="list" activeCellColorRow="grey"></tm-table>
</tm-sheet>
<tm-sheet :shadow="24" :padding="[0, 0]">
<view class="text-size-n pa-24 text-blue">基本的表格</view>
<tm-table @click="test" :list="list2"></tm-table>
</tm-sheet>
</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script>
export default {
data() {
return {
list2: {
headerBgcolor: 'blue',
header: [
{
text: '1'
},
{
text: '2'
},
{
text: '3'
},
{
text: '4'
},
{
text: '5'
}
],
col: [
[
{
text: '36',
color: ''
},
{
text: '569'
},
{
text: '569'
},
{
text: '569'
},
{
text: '单价'
}
],
[
{
text: '36',
color: ''
},
{
text: '569'
},
{
text: '569'
},
{
text: '569'
},
{
text: '单价'
}
],
[
{
text: '36',
color: ''
},
{
text: '569'
},
{
text: '569'
},
{
text: '569'
},
{
text: '单价'
}
]
]
},
list: {
headerBgcolor: 'bg-gradient-blue-accent',
header: [
{
text: '设置整列宽',
grid: 6,
color: 'blue'
},
{
text: '列颜色',
color: 'green'
},
{
text: '价格类型',
color: ''
},
{
text: '来源数据',
color: 'blue'
},
{
text: '价格类型',
color: ''
},
{
text: '价格类型',
color: ''
}
],
col: [
[
{
text: '36',
color: ''
},
{
text: '569'
},
{
text: '569'
},
{
text: '569'
},
{
text: '单价'
},
{
text: '呵呵'
}
],
[
{
text: '36',
grid: 3,
color: 'green'
},
{
text: '569',
grid: 3
},
{
text: '单独控制列表宽',
grid: 6,
color: 'pink'
},
{
text: '569'
},
{
text: '单价'
},
{
text: '官网扒取'
}
],
[
{
text: '36'
},
{
text: '569'
},
{
text: '569'
},
{
text: '569'
},
{
text: '单价'
},
{
text: '官网扒取'
}
],
[
{
text: '36'
},
{
text: '569'
},
{
text: '569',
color: 'bg-gradient-green-accent'
},
{
text: '569'
},
{
text: '单价'
},
{
text: '官网扒取'
}
],
[
{
text: '36'
},
{
text: '569'
},
{
text: '569'
},
{
text: '569'
},
{
text: '单价'
},
{
text: '官网扒取'
}
],
[
{
text: '单独控制颜色',
color: 'blue'
},
{
text: '569'
},
{
text: '569'
},
{
text: '569'
},
{
text: '单价'
},
{
text: '官网扒取'
}
],
[
{
text: '36'
},
{
text: '569'
},
{
text: '569'
},
{
text: '569'
},
{
text: '单价'
},
{
text: '官网扒取'
}
]
]
}
};
},
methods: {
test(e){
uni.showModal({
title:'提示',
content:`列：${e.col},行${e.row},数据为:${JSON.stringify(e.data)}`
})
}
}
};
</script>
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
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
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
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
👉props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| col | Number | 1-12 | 3 | 列宽 |
| fixedHeader | Boolean | false/true | false | 是否固定表头，默认不固定。注意能不开启尽量不开启，体验不是很好，但勉强可用 |
| height | Number | 任意整数 | 0 | 表格的整体高度，如果设定了高度，超过后变为滚动 |
| rowHeight | Number | 任意整数 | 72 | 单元格的高度，单位rpx，超出的内容会隐藏。 |
| rang-key | String | - | text | 数据数组对象时读取文本的字段 |
| sort-key | String | - | text | 排序的字段名称，默认对rang-key字段的值进行排序。 |
| activeCellColorRow | String | 任意主题色名称 | primary | 默认高亮的行颜色 |
| maxGrid | Number | 12、24任意整数 | 12 | 布局的列数,默认是12格，但有时需要奇数列表，这个就能用到。比如grid=2,想5列表，此时可设为10 |
| list | Object | 任意主题色名称 | {} | list数据格式见文档 |
list数据格式
//基本的格式如下
{
header: [], //【可以不填写此字段】头部数据，如果没有这个字段，将不显示头部
col:[],//行的数据
headerBgcolor:'primary' ,//【可以不填写此字段】头部的背景颜色，如果没有此字段，默认显示primary主题色。
}
// header,col格式见如下。
{
text: '设置整列宽',//单元格的内容。
grid: 6, //单元格的宽度，【可不填写此字段，默认为 3】
color: 'blue' //[可不填写] 默认为无
}
//如果在header中设置了grid，那么整列都会这个宽度，但如果单元格也出现了grid则以单格设定的宽度为宽度。
//同样颜色color也是如此。如果header中设置了颜色，那么整列都会是这个颜色。如果单元出现了color则以单元格为准。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
小技巧
如果我想单独设置完全个性化的单元格怎么弄呢？其实很简单，在color这个属性里加上你自己的类就可以了。本义上color只是一个类 你不一定要写成blue蓝色背景。也可以写成blue text-size-lg 就变成了蓝色背景，lg字号文字了。我所有的组件color类其实都可 以当作自定义类来看，不局限于颜色的。
对数据排序时，只能对该列为数字时的排序。如果为字母或者其它字符则为反转和正常两种排序
完整的格式如下
{
headerBgcolor: 'primary',//头背景
header: [
{
text: '1',
color:'blue',
grid:3,
sort:true ,//是否在表头显示排序功能。false或者不出现此字段，不显示排序功能。
rowAlign:'flex-center',//默认值，居中，设置后此列的单元格以此对齐。对齐类为本库类。
}
],
col: [
[
{
text: '36',
color:'blue',
grid:3,
rowAlign:'flex-center',//单独设置此单元格的对齐方式。默认值，居中，设置后覆盖头部的对齐方式，
}
]
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
最精简的格式如下
{
header: [
{text: '1'}
],
col: [
[{text: '36'}]
]
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
👉slot插槽
| 插槽名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| cell1.1.7 | data | - | 单元格插槽 |
插槽数据data如下：
{parentIndex:行index,childrenIndex:列index,data:单元格数据}
1
2
2
用法如下
<tm-table @click="test" :list="list2">
<template #cell="{data}">
<block v-if="data.parentIndex==1&&data.childrenIndex==1">
<tm-button size="s">在1,1处插入按钮</tm-button>
</block>
<block v-else>
{{data.data.text}}
</block>
</template>
</tm-table>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
👉更新日志
2021年8月20日14:8:5 初始版本。