Array数组框
... 2022-8-27 About 1 min
# Array数组框
# 基础用法
通过将type属性的值指定为array
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'数组框',
prop:'array',
type:'array'
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Expand Copy Copy
# 默认值
value属性可以提供一个初始化的默认值
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'数组框',
prop:'array',
type:'array',
value:[0,1]
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy Copy
# 最大限制
limit限制最大个数
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'数组框',
prop:'array',
type:'array',
limit:3,
value:[0,1,2]
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Expand Copy Copy
# 禁用状态
通过disabled属性指定是否禁用
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'数组框',
prop:'array',
type:'array',
disabled:true,
value:[0,1]
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Expand Copy Copy
# 图片框
通过将type属性的值指定为img
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'图片框',
prop:'array',
type:'img',
value:['/images/logo-bg.jpg']
}, {
label:'单个图片框',
prop:'array',
alone:true,
type:'img',
value:['/images/logo-bg.jpg']
}
]
}
}
}
}
</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
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
Expand Copy Copy
# 超链接框
通过将type属性的值指定为url
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'超链接框',
prop:'array',
type:'url',
value:['http://avuejs.com']
},
{
label:'单个超链接框',
prop:'array',
alone:true,
type:'url',
value:['http://avuejs.com']
}
]
}
}
}
}
</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
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
Expand Copy Copy