Checkbox多选框
... 2021-8-5 About 2 min
# Checkbox多选框
# 基础用法
由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
通过将type属性的值指定为checkbox,同时配置dicData为字典值
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option: {
column: [{
label: '多选',
prop: 'checkbox',
type: 'checkbox',
dicData:[{
label:'男',
value:0
},{
label:'女',
value:1
},{
label:'未知',
value:''
}]
}
]
}
}
}
}
</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
# 网络字典
更多用法参考表单数据字典
配置dicUrl指定后台接口的地址
<avue-form :option="option"></avue-form>
<script>
export default {
data(){
return {
option:{
column: [{
label:'多选框',
prop:'checkbox',
type:'checkbox',
props: {
label: 'name',
value: 'code'
},
dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
}]
}
}
}
}
</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
# 默认值
value属性可以提供一个初始化的默认值
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'多选框',
prop:'checkbox',
type:'checkbox',
dicData:[{
label:'男',
value:0
},{
label:'女',
value:1
},{
label:'未知',
value:''
}],
value:[0]
}
]
}
}
}
}
</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
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
Expand Copy Copy
# 禁用状态
通过disabled属性指定是否禁用
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'多选框',
prop:'checkbox',
type:'checkbox',
dicData:[{
label:'男',
value:0
},{
label:'女',
value:1
},{
label:'未知',
value:''
}],
disabled:true
}
]
}
}
}
}
</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
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
Expand Copy Copy
# 禁用选项
返回的字典中数据配置disabled属性指定是否禁用
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label:'多选框',
prop:'checkbox',
type:'checkbox',
dicData:[{
label:'男',
value:0
},{
label:'女',
value:1,
disabled:true
},{
label:'未知',
value:''
}]
}
]
}
}
}
}
</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
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
Expand Copy Copy
# 全选
配置all为true
<avue-form :option="option" ></avue-form>
<script>
export default {
data() {
return {
option: {
column: [{
label: '多选',
prop: 'checkbox',
type: 'checkbox',
all:true,
dicData:[{
label:'男',
value:0
},{
label:'女',
value:1
},{
label:'未知',
value:''
}]
}
]
}
}
}
}
</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
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
Expand Copy Copy
# 数量限制
使用min和max属性能够限制可以被勾选的项目的数量。
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option: {
column: [{
label: '空心多选',
prop: 'checkbox',
type: 'checkbox',
min:0,
max:2,
dicData:[{
label:'男',
value:0
},{
label:'女',
value:1
},{
label:'未知',
value:''
}]
}
]
}
}
}
}
</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
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
Expand Copy Copy
# 按钮样式
配置button为true
<avue-form :option="option" v-model="form"></avue-form>
<script>
export default {
data() {
return {
form: {
checkbox:[0,1],
},
option: {
column: [{
label: '实心多选',
prop: 'checkbox',
type: 'checkbox',
button:true,
dicData:[{
label:'男',
value:0
},{
label:'女',
value:1
},{
label:'未知',
value:''
}]
}
]
}
}
}
}
</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
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
Expand Copy Copy
# 空心样式
配置border为true
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option: {
column: [{
label: '空心多选',
prop: 'checkbox',
type: 'checkbox',
border:true,
dicData:[{
label:'男',
value:0
},{
label:'女',
value:1
},{
label:'未知',
value:''
}]
}
]
}
}
}
}
</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
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
Expand Copy Copy