Radio单选框
... 2021-8-5 About 2 min
# Radio单选框
# 基础用法
由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
通过将type属性的值指定为radio,同时配置dicData为字典值
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option: {
column: [{
label: '多选',
prop: 'radio',
type: 'radio',
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:'radio',
type:'radio',
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:'radio',
type:'radio',
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:'radio',
type:'radio',
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:'radio',
type:'radio',
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
# 按钮样式
配置button为true
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option: {
column: [{
label: '实心多选',
prop: 'radio',
type: 'radio',
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
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
# 空心样式
配置border为true
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option: {
column: [{
label: '空心多选',
prop: 'radio',
type: 'radio',
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