vue动态表单添加_:visible.sync="addformvisible" :close-on-click-mod

说一下vue 动态表单添加，查了几篇文章，照着改了改，算是原创吧，不多说上代码。展示的图是这样的

//这段代码是静态的
<!-- --<el-form-item class="rules" label="评分项:" prop="moreNotifyOjbectRules.scoreItems" :rules="moreNotifyOjbectRules.scoreItems">
                    <el-input v-model="addForm.moreNotifyObject.scoreItems" placeholder="请输入"  class="el-select_box"></el-input>
                </el-form-item>
                <el-form-item class="rules" label="技术分:" prop="moreNotifyOjbectRules.technology" :rules="moreNotifyOjbectRules.technology">
                    <el-input v-model="addForm.moreNotifyObject.technology" placeholder="请输入"  class="el-select_box"></el-input>
                </el-form-item>
                <el-form-item class="rules" label="经济分:" prop="moreNotifyOjbectRules.economics" :rules="moreNotifyOjbectRules.economics">
                    <el-input v-model="addForm.moreNotifyObject.economics" placeholder="请输入"  class="el-select_box"></el-input>
                </el-form-item>
                <el-form-item class="rules" label="共同分:" prop="moreNotifyOjbectRules.common" :rules="moreNotifyOjbectRules.common">
                    <el-input v-model="addForm.moreNotifyObject.common" placeholder="请输入"  class="el-select_box"></el-input>
                </el-form-item>-->
1
2
3
4
5
6
7
8
9
10
11
12
13

//上段代码是静态的是下面代码的一个注释掉的，一开始以为要写上，
//结果发现静态的表单元素一直显示，
//以至于表单初始化显示的时候就显示了两组评分项，所以才将其注释掉了
<el-dialog  :visible.sync="addFormVisible" :close-on-click-modal="false" width="90%">
            <P class="title"><span class="titleSpan">丨</span>新增</P>
            <div class="titleHr"/>
            <el-form :inline="true" :model="addForm" label-width="90px"  ref="addForm">
                <!--<el-form-item class="rules" label="评分项:" prop="moreNotifyOjbectRules.scoreItems" :rules="moreNotifyOjbectRules.scoreItems">
                    <el-input v-model="addForm.moreNotifyObject.scoreItems" placeholder="请输入"  class="el-select_box"></el-input>
                </el-form-item>
                <el-form-item class="rules" label="技术分:" prop="moreNotifyOjbectRules.technology" :rules="moreNotifyOjbectRules.technology">
                    <el-input v-model="addForm.moreNotifyObject.technology" placeholder="请输入"  class="el-select_box"></el-input>
                </el-form-item>
                <el-form-item class="rules" label="经济分:" prop="moreNotifyOjbectRules.economics" :rules="moreNotifyOjbectRules.economics">
                    <el-input v-model="addForm.moreNotifyObject.economics" placeholder="请输入"  class="el-select_box"></el-input>
                </el-form-item>
                <el-form-item class="rules" label="共同分:" prop="moreNotifyOjbectRules.common" :rules="moreNotifyOjbectRules.common">
                    <el-input v-model="addForm.moreNotifyObject.common" placeholder="请输入"  class="el-select_box"></el-input>
                </el-form-item>-->
                <!-- //动态生成的联系人表单 -->
                <div class="moreRules">
                    <div class="moreRulesIn" v-for="(item, index) in addForm.moreNotifyObject" :key="item.key">
                        <el-form-item class="rules" label="评分项:" :prop="'moreNotifyObject.' + index +'.scoreItems'" :rules="moreNotifyOjbectRules.scoreItems">
                            <el-input v-model="item.scoreItems" placeholder="请输入"  class="el-select_box"></el-input>
                        </el-form-item>
                        <el-form-item class="rules" label="技术分:" :prop="'moreNotifyObject.'+ index +'.technology'" :rules="moreNotifyOjbectRules.technology">
                            <el-input v-model="item.technology" placeholder="请输入"  class="el-select_box"></el-input>
                        </el-form-item>
                        <el-form-item class="rules" label="经济分:" :prop="'moreNotifyObject.'+ index +'.economics'" :rules="moreNotifyOjbectRules.economics">
                            <el-input v-model="item.economics" placeholder="请输入"  class="el-select_box"></el-input>
                        </el-form-item>
                        <el-form-item class="rules" label="共同分:" :prop="'moreNotifyObject.'+ index +'.common'" :rules="moreNotifyOjbectRules.common">
                            <el-input v-model="item.common" placeholder="请输入"  class="el-select_box"></el-input>
                        </el-form-item>
                        <el-button @click="deleteRules(item, index)" >删除</el-button>
                    </div>
                </div>
                <el-col :span="24">
                <el-form-item >
                    <el-button type="text" class="addUser" @click="addUser()" >添加一条</el-button>
                </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目总分" prop="total">
                        <el-input ref="total" v-model="addForm.total" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="技术平均分" prop="technologyAverage">
                        <el-input ref="technologyAverage" v-model="addForm.technologyAverage" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="经济平均分" prop="economicsAverage">
                        <el-input ref="economicsAverage" v-model="addForm.economicsAverage" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="共同平均分" prop="commonAverage">
                        <el-input ref="commonAverage" v-model="addForm.commonAverage" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="calculation">计算</el-button>
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
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

//因为动态的rule也要动态的生成moreNotifyOjbectRules，删除也一样
data() {
       return {
           moreNotifyOjbectRules: {
               scoreItems: [
                   {required: true, message: '请输入内容,不能为空', trigger: 'blur'},
               ],
               technology: [
                   {required: true, message: '请输入内容,不能为空', trigger: 'blur'},
               ],
               economics: [
                   {required: true, message: '请输入内容,不能为空', trigger: 'blur'},
               ],
               common: [
                   {required: true, message: '请输入内容,不能为空', trigger: 'blur'},
               ],
           },
           //新增界面数据
           addForm:{
               id:'',
               total:'',
               technologyAverage:'',
               economicsAverage:'',
               commonAverage:'',
               moreNotifyObject: [
                   {
                       scoreItems: '',
                       technology: '',
                       economics: '',
                       common: ''
                   },
               ]
           },
       }
   }
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

//点击添加一条对应的方法向addForm中的moreNotifyObject添加元素，vue就会根据data()中的addForm的moreNotifyObject遍历
addUser() {
                this.addForm.moreNotifyObject.push({
                    scoreItems: '',
                    technology: '',
                    economics: '',
                    common: ''
                });
            },
           
//删除方法
deleteRules(item, index) {
    this.index = this.addForm.moreNotifyObject.indexOf(item)
    if (index !== -1) {
        this.addForm.moreNotifyObject.splice(index, 1)
    }
},
//新增提交的方法
addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            debugger
                            this.addLoading = true;
                            this.addForm.total = this.$refs.total.value ;
                            this.addForm.technologyAverage = this.$refs.technologyAverage.value;
                            this.addForm.economicsAverage = this.$refs.economicsAverage.value;
                            this.addForm.commonAverage = this.$refs.commonAverage.value;
                            let params = this.addForm;
                            debugger
                            saveScore(params).then((res) => {
                                this.addLoading = false;
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.addFormVisible = false;
                                this.getUserProject();
                            });
                        });
                    }
                });
            },
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