表单组件事件
... 2021-7-29 About 2 min
# 表单组件事件
Tips
2.6.0+
change事件click事件focus事件blur事件enter事件
# 组件事件
目前组件有 5 个事件change,click,focus,blur,enter
<avue-form :option="option" v-model="obj"></avue-form>
<script>
export default {
data() {
return {
obj: {},
data: [],
option: {
column: [
{
label: "省份",
prop: "name",
type: "select",
props: {
label: "name",
value: "code",
},
dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
change: ({ value, column, item, dic }) => {
this.$message.success("change事件查看控制台");
console.log("值改变", value, column, item, dic);
},
click: ({ value, column }) => {
this.$message.success("click事件查看控制台");
console.log("点击事件", value, column);
},
focus: ({ value, column }) => {
this.$message.success("focus事件查看控制台");
console.log("获取焦点", value, column);
},
blur: ({ value, column }) => {
this.$message.success("blur事件查看控制台");
console.log("失去焦点", value, column);
},
enter: ({ value, column }) => {
this.$message.success("enter事件查看控制台");
console.log("回车事件", value, column);
},
},
],
},
};
},
};
</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
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
Expand Copy Copy
# 组件对象
Tips
2.6.2+
Tips
<avue-form ref="form" v-model="form" :option="option"></avue-form>
<script>
export default {
data() {
return {
form: {},
option: {
labelWidth: 120,
column: [
{
label: "测试框",
prop: "text",
},
],
},
};
},
mounted() {
this.$message.success("查看控制台");
console.log("text的ref对象");
console.log(this.$refs.form.getPropRef("text").$refs.temp);
},
};
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Expand Copy Copy
# 组件交互
Tips
2.8.10+
2.13.0+ control 支持promise类型
可以写判断逻辑，返回对应改变的对象属性，
<avue-form :option="option" v-model="form"></avue-form>
<script>
export default {
data() {
return {
form: {
text1: 0,
},
option: {
column: [
{
label: "内容1",
prop: "text1",
type: "radio",
control: (val, form) => {
if (val === 0) {
return {
text2: {
display: true,
},
text3: {
label: "内容3",
},
};
} else {
return {
text2: {
display: false,
},
text3: {
label: "有没有发现我变了",
},
};
}
},
dicData: [
{
label: "显示",
value: 0,
},
{
label: "隐藏",
value: 1,
},
],
},
{
label: "内容2",
prop: "text2",
display: true,
control: (val, form) => {
return new Promise((resolve) => {
if (val) {
resolve({
text1: {
label: "改变内容1",
},
});
} else {
resolve({
text1: {
label: "内容1",
},
});
}
});
},
},
{
label: "内容3",
prop: "text3",
},
],
},
};
},
};
</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
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
Expand Copy Copy