表单高级用法
... 2022-3-18 About 2 min
# 表单高级用法
# 表单初始化
<el-button type="primary" size="small" @click="handleReload" >Key初始化</el-button>
<avue-form :key="reload" :option="option" ></avue-form>
<script>
export default {
data() {
return {
reload: Math.random(),
option:{
border:true,
align:'center',
menuAlign:'center',
column:[
{
label:'姓名',
prop:'name'
}, {
label:'性别',
prop:'sex'
},{
label: '省份',
prop: 'province',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
}]
}
}
},
methods:{
handleReload(){
this.reload=Math.random();
this.$message.success('初始化完成')
}
}
}
</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
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
Expand Copy Copy
# 配置项服务端加载
Tips
- 这里没有走真真的服务器请求，而是做了一个模拟
<el-button type="primary"
size="small"
icon="el-icon-sort"
@click="getOption">服务端加载</el-button>
<avue-form :key="reload" v-model="form" :option="option" v-loading="loading"></avue-form>
<script>
export default {
data () {
return {
reload: Math.random(),
loading: true,
form: {},
option: {},
};
},
methods: {
getOption () {
this.$message.success('模拟2s后服务端动态加载');
setTimeout(() => {
this.option = {
border: true,
align: 'center',
menuAlign: 'center',
column: [
{
label: '姓名',
prop: 'name'
}, {
label: '性别',
prop: 'sex'
}, {
label: '省份',
prop: 'province',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
}]
}
this.form = {
name: '张三',
sex: '男',
province: '110000'
}
this.reload = Math.random()
this.loading = false;
}, 2000)
}
}
}
</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
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
Expand Copy Copy
# 配置项切换
<el-button type="primary" size="small" icon="el-icon-sort" @click="handleSwitch" >切 换</el-button>
<br/><br/>
<avue-form :key="reload" v-model="form" :option="option">
</avue-form>
<script>
export default {
data() {
return {
reload: Math.random(),
type:true,
form: {
name:'张三',
sex:'男',
username:'smallwei',
password:'smallwei'
},
option:{},
option1:{
addBtn:false,
column:[
{
label:'昵称',
prop:'name'
}
]
},
option2:{
addBtn:false,
column:[
{
label:'用户名',
prop:'username'
}, {
label:'密码',
prop:'password',
type:'password'
}, {
label:'姓名',
prop:'name'
}
]
},
};
},
mounted(){
this.handleSwitch();
},
methods: {
handleSwitch(){
this.type=!this.type;
if(this.type){
this.option=this.option1;
}else{
this.option=this.option2;
}
this.reload=Math.random();
}
}
}
</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
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
Expand Copy Copy
# 动态改变结构
Tips
2.8.12+
<avue-form :defaults.sync="defaults" :option="option" v-model="form"></avue-form>
<script>
export default {
data(){
return {
defaults:{},
form:{
text1:0,
},
option:{
column: [{
label: '内容1',
prop: 'text1',
type:'radio',
dicData:[{
label:'显示',
value:0
},{
label:'隐藏',
value:1,
}]
},{
label: '内容2',
prop: 'text2',
display:true
},{
label: '内容3',
prop: 'text3'
}]
}
}
},
watch:{
'form.text1'(val){
if(val==0){
this.defaults.text2.display=true
this.defaults.text3.label='内容3'
}else{
this.defaults.text2.display=false
this.defaults.text3.label='有没有发现我变了'
}
}
}
}
</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
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
Expand Copy Copy
# 函数用法
Tips
2.9.0+
<el-button type="primary" @click="showDialog"> 弹窗表单</el-button>
<el-button type="primary" @click="showDialog('drawer')"> 抽屉表单</el-button>
<el-button type="success" @click="showDialog1"> 弹窗表单（带上数据）</el-button>
<script>
export default {
data() {
return {
option: {
submitText: '完成',
span:24,
column: [
{
label: "姓名",
prop: "name",
rules: [{
required: true,
message: "请输入姓名",
trigger: "blur"
}],
},
{
label: "年龄",
prop: "age"
}
]
},
form: {}
}
},
methods: {
showDialog(type) {
this.$DialogForm.show({
title: '弹窗页面',
width: '30%',
type:type,
menuPosition:'right',
option: this.option,
beforeClose: (done) => {
this.$message.success('关闭前方法')
done()
},
callback:(res)=>{
console.log(res.data);
this.$message.success('关闭等待框')
setTimeout(() => {
res.done()
setTimeout(() => {
this.$message.success('关闭弹窗')
res.close()
}, 1000)
}, 1000)
}
})
},
showDialog1() {
this.$DialogForm.show({
title: '弹窗页面（带上数据)',
width: '50%',
data: { name: 'small',age:18 },
option: this.option,
callback:(res)=>{
console.log(res.data);
this.$message.success('关闭等待框')
setTimeout(() => {
res.done()
setTimeout(() => {
this.$message.success('关闭弹窗')
res.close()
}, 1000)
}, 1000)
}
})
}
}
}
</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
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
Expand Copy Copy