其它类型
... 2022-3-9 About 2 min
# 其它类型
Tips
2.5.3+
<avue-crud ref="crud" :option="option" :data="data"></avue-crud>
<script>
export default {
data() {
return {
user: {},
data: [{
icon: "el-icon-platform-eleme",
color: 'rgba(201, 37, 37, 1)',
array: '1,2,3',
video:'/images/logo-bg.jpg',
href: 'https://www.baidu.com',
string:'/images/logo-bg.jpg,/images/logo-bg.jpg',
img: 'https://avuejs.com/images/logo-bg.jpg,https://avuejs.com/images/logo-bg.jpg'
}],
option: {
align: 'center',
menuAlign: 'center',
border: true,
column: [{
label: '超链接',
prop: 'href',
type: 'url'
}, {
label: '图标',
prop: 'icon',
type: 'icon',
iconList: [{
label: '阿里图标-Symbol图标',
list: [{
label: '机构',
value: '#icon-jigou'
},
{
label: '短信管理',
value: '#icon-duanxinguanli'
},
{
label: '发票管理系统',
value: '#icon-fapiaoguanlixitong'
},
{
label: '角色',
value: '#icon-jiaose'
},
{
label: '黑名单',
value: '#icon-heimingdan2'
},
{
label: 'KHCFDC_附件',
value: '#icon-fujian4'
},
{
label: '文档',
value: '#icon-wendang3'
},
{
label: '刷卡',
value: '#icon-shuaka'
},
{
label: '停车',
value: '#icon-tingche3'
},
{
label: '对象存储OSS',
value: '#icon-duixiangcunchuOSS'
},
{
label: '反馈',
value: '#icon-fankui2'
},
{
label: '短信',
value: '#icon-ziyuan1'
},
{
label: '对象存储服务',
value: '#icon-beikongshuiwupingtaimenhu-tubiao_duixiangcunchufuwu'
},
{
label: '数据库_jurassic',
value: '#icon-jurassic_data'
},
{
label: '日志',
value: '#icon-rizhi1'
},
{
label: '权限',
value: '#icon-quanxian4'
},
{
label: '订单',
value: '#icon-5'
},
{
label: '机构',
value: '#icon-jigou1'
},
{
label: '机构人员',
value: '#icon-jigourenyuan'
},
{
label: '角色管理',
value: '#icon-jiaoseguanli4'
},
{
label: '角色管理',
value: '#icon-jiaoseguanli5'
},
{
label: '数据监控',
value: '#icon-shujujiankong'
},
{
label: '活动展示',
value: '#icon-huodongzhanshi'
},
{
label: 'vip invitation',
value: '#icon-vipinvitation'
}
]
}, {
label: '基本图标',
list: [{
label: '名称1',
value: 'el-icon-info'
}, {
label: '名称2',
value: 'el-icon-error'
}, {
label: '名称3',
value: 'el-icon-success'
}, {
label: '名称4',
value: 'el-icon-warning'
}, {
label: '名称5',
value: 'el-icon-question'
}]
}, {
label: '方向图标',
list: ['el-icon-info', 'el-icon-back', 'el-icon-arrow-left', 'el-icon-arrow-down', 'el-icon-arrow-right', 'el-icon-arrow-up']
}, {
label: '符号图标',
list: ['el-icon-plus', 'el-icon-minus', 'el-icon-close', 'el-icon-check']
}, {
label: '阿里云图标',
list: ['iconfont icon-zhongyingwen', 'iconfont icon-rizhi1', 'iconfont icon-bug', 'iconfont icon-qq1', 'iconfont icon-weixin1']
}]
}, {
label: '颜色',
prop: 'color',
type: 'color'
},
{
label: '单图',
prop: 'video',
type: 'upload',
listType: 'picture-img',
span: 24,
propsHttp: {
home:'https://avuejs.com',
},
tip: '只能上传jpg/png用户头像，且不超过500kb',
action: '/imgupload'
}, {
label: '图片',
prop: 'img',
dataType: 'string',
type: 'img'
},{
label: '图片上传组件',
prop: 'string',
dataType: 'string',
type: 'upload',
propsHttp: {
home:'https://avuejs.com',
res: 'data'
},
span: 24,
listType: 'picture-card',
tip: '只能上传jpg/png文件，且不超过500kb',
action: '/imgupload'
}, {
label: '数组',
prop: 'array',
dataType: 'number',
propsHttp: {
home:'http://demo.cssmoban.com',
},
type: 'array'
}]
}
}
}
}
</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
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
Expand Copy Copy
# 其它自定义卡槽
Tips
2.7.9+
<avue-crud :option="option" :page.sync="page" :data="data">
<template slot="header">
<el-tag size="small">头部卡槽</el-tag>
</template>
<template slot="body">
<el-tag size="small">中部卡槽</el-tag>
</template>
<template slot="footer">
<el-tag size="small">尾部卡槽</el-tag>
</template>
<template slot="page">
<el-tag size="small">分页卡槽</el-tag>
</template>
</avue-crud>
<script>
export default {
data(){
return {
page:{
total:40
},
data:[{
name:'张三',
age:18,
}],
option:{
column: [{
label: '姓名',
prop: 'name'
},{
label: '年龄',
prop: 'age'
}]
}
}
}
}
</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
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
Expand Copy Copy