# ModalForm 模态框表单
模态框表单，对 s-modal 及 el-form 进行了二次封装，用于快速创建数据编辑表单。
# 基本用法
点击查看代码
<template>
<div>
<el-button type="primary" @click="modalVisible = true">点击打开模态框表单</el-button>
<s-modal-form :visible.sync="modalVisible" title="基本模态框表单" :model="modalForm" @ok="handleOk">
<s-form-item label="姓名" prop="name">
<el-input v-model="modalForm.name" placeholder="请输入姓名" />
</s-form-item>
<s-form-item label="性别" prop="sex">
<el-select v-model="modalForm.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</s-form-item>
</s-modal-form>
</div>
</template>
<script>
export default {
data() {
return {
modalVisible: false,
modalForm: {
name: undefined,
sex: undefined,
}
};
},
methods: {
handleOk(done) {
console.log(this.modalForm);
done && done();
}
}
}
</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
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
# 表单校验
点击查看代码
<template>
<div>
<el-button type="primary" @click="modalVisible = true">点击打开模态框表单</el-button>
<s-modal-form :visible.sync="modalVisible" title="模态框表单校验" :model="modalForm" :rules="modalFormRules" @ok="handleOk">
<s-form-item label="姓名" prop="name">
<el-input v-model="modalForm.name" placeholder="请输入姓名" />
</s-form-item>
<s-form-item label="性别" prop="sex">
<el-select v-model="modalForm.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</s-form-item>
</s-modal-form>
</div>
</template>
<script>
export default {
data() {
return {
modalVisible: false,
modalForm: {
name: undefined,
sex: undefined,
},
modalFormRules: {
name: [ { required: true, message: "请输入姓名", trigger: "blur" } ],
sex: [ { required: true, message: "请选择性别", trigger: "blur" } ]
}
};
},
methods: {
handleOk(done) {
console.log(this.modalForm);
done && done();
}
}
}
</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
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
# 加载中状态
点击查看代码
<template>
<div>
<el-button type="primary" @click="modalVisible = true">点击打开模态框表单</el-button>
<s-modal-form :visible.sync="modalVisible" title="模态框表单加载中状态" :loading="modalFormLoading" :model="modalForm"
@open="handleOpen" @ok="handleOk">
<s-form-item label="姓名" prop="name">
<el-input v-model="modalForm.name" placeholder="请输入姓名" />
</s-form-item>
<s-form-item label="性别" prop="sex">
<el-select v-model="modalForm.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</s-form-item>
</s-modal-form>
</div>
</template>
<script>
export default {
data() {
return {
modalVisible: false,
modalFormLoading: false,
modalForm: {
name: undefined,
sex: undefined,
}
};
},
methods: {
handleOpen() {
this.modalFormLoading = true;
setTimeout(() => {
this.modalFormLoading = false;
}, 1500);
},
handleOk(done) {
console.log(this.modalForm);
this.modalFormLoading = true;
setTimeout(() => {
this.modalFormLoading = false;
done && done();
}, 1500);
}
}
}
</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
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
# 关闭后重置表单
点击查看代码
<template>
<div>
<el-button type="primary" @click="modalVisible = true">点击打开模态框表单</el-button>
<s-modal-form :visible.sync="modalVisible" title="模态框关闭后重置表单" :model="modalForm" resetOnClosed @ok="handleOk">
<s-form-item label="姓名" prop="name">
<el-input v-model="modalForm.name" placeholder="请输入姓名" />
</s-form-item>
<s-form-item label="性别" prop="sex">
<el-select v-model="modalForm.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</s-form-item>
</s-modal-form>
</div>
</template>
<script>
import { cloneDeep } from "lodash";
export default {
data() {
return {
modalVisible: false,
modalForm: {
name: undefined,
sex: undefined,
}
};
},
methods: {
handleOk(done) {
console.log(cloneDeep(this.modalForm), this.modalForm);
done && done();
}
}
}
</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
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
# 自定义模态框
点击查看代码
<template>
<div>
<el-button type="primary" @click="modalVisible = true">点击打开模态框表单</el-button>
<s-modal-form :visible.sync="modalVisible" title="自定义模态框" :model="modalForm" :extModal="customModalProps" @ok="handleOk">
<s-form-item label="姓名" prop="name">
<el-input v-model="modalForm.name" placeholder="请输入姓名" />
</s-form-item>
<s-form-item label="性别" prop="sex">
<el-select v-model="modalForm.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</s-form-item>
</s-modal-form>
</div>
</template>
<script>
export default {
data() {
return {
modalVisible: false,
customModalProps: {
bodyStyle: { paddingRight: "4rem" },
screenCenter: true
},
modalForm: {
name: "",
sex: undefined,
}
};
},
methods: {
handleOk(done) {
console.log(this.modalForm);
done && done();
}
}
}
</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
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
# 自定义表单
点击查看代码
<template>
<div>
<el-button type="primary" @click="modalVisible = true">点击打开模态框表单</el-button>
<s-modal-form :visible.sync="modalVisible" title="自定义表单" :model="modalForm" :extForm="customFormProps" @ok="handleOk">
<s-form-item label="姓名" prop="name">
<el-input v-model="modalForm.name" placeholder="请输入姓名" />
</s-form-item>
<s-form-item label="性别" prop="sex">
<el-select v-model="modalForm.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</s-form-item>
</s-modal-form>
</div>
</template>
<script>
export default {
data() {
return {
modalVisible: false,
customFormProps: {
labelWidth: 50,
showColon: true
},
modalForm: {
name: "",
sex: undefined,
}
};
},
methods: {
handleOk(done) {
console.log(this.modalForm);
done && done();
}
}
}
</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
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