[JavaScript知识库] element ui 实现动态表单

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> element ui 实现动态表单 -> 正文阅读

[JavaScript知识库]element ui 实现动态表单

实现具体功能

对表单进行新增、删除以及验证每一个表单的字段。
实现效果如图
在这里插入图片描述 1.实现表单的添加和删除

   // 新增
       addForm(index) {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    this.form.formList.push({
                        ...this.form.formList[index],
                        questionClassify: 1,
                        severityDegree: 1,
                        question: '',
                        modelId: '',
                        modelName: '',
                        picIdList: [],
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    
   // 删除
   deleteCurrentForm(index) {
            debugger
            // if()
            this.form.formList.splice(index, 1)
        },

2.可能较不常见的就是表单的验证，在添加下一个表单时对上一个表单进行验证。只需在prop中加入当前要验证的哪个表单的哪个字段，如下。

 <el-form-item label="检查时间" :prop="`formList.${index}.checkDate`" :rules="rules.checkDate">

再展示一下form的结构：

 form: {
          formList: [{
            inspectType: 0,
            checkDate: new Date(),
            checkUserId: '',
            checkUserName: '',
            checkOrgName: '',
             checkOrgId: '',
             modelId: '',
             modelName: '',
             questionClassify: 1,
             severityDegree: 1,
             unitProject: '',
             distributeProject: '地基与基础', //分部工程
             concreteProject: '',
             question: '',
             picIdList: []
             }]
       },
    rules: {checkDate: [ {required: true, message: '请输入检查时间', trigger: 'blur'} ] }