0
点赞
收藏
分享

微信扫一扫

使用elementui动态添加表单并校验


elementui官网动态增减表单项的例子有几个地方容易被忽略

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
    <el-button @click="addDomain">新增域名</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      }
    }
  }
</script>

使用elementui动态添加表单并校验_elementui

动态表格表单组件

<template>
     
     <div class="container-table"  >
            <el-form ref="formTable" :rules="rules" :model="formTable">
                <el-table v-loading="loading" :data="formTable.tableList" >
                    
                    <el-table-column type="index" :label="$t('inventoryManagement.index')"></el-table-column>
                    <el-table-column   label="工序" prop="processName"></el-table-column>    
                    <el-table-column   label="机台编号" prop="machineNumber"></el-table-column>
                    <el-table-column   label="机台名称" prop="machineName"></el-table-column>

                    <el-table-column   label="检验名称" prop="inspectName"></el-table-column>    
                    <el-table-column   label="检验类型" prop="inspectType">
                        
                    </el-table-column>
                    <el-table-column   label="规格上限" prop="upperSpecification"></el-table-column>
                    <el-table-column   label="规格下限" prop="loweSpecification"></el-table-column>
                    <el-table-column   label="备注" prop="notes"></el-table-column>
                    <el-table-column   label="检验值" prop="inspectValue"></el-table-column>
                    <el-table-column   label="检验结果" prop="inspectResult">
                        <template slot-scope="scope">
                            <span v-if="scope.row.inspectResult=='合格'" style="color: green;">合格</span>    
                            <span v-else style="color: red;">{{scope.row.inspectResult}}</span> 
                        </template>
                    </el-table-column>
 
 
                    <el-table-column label="人工复检值"   width="110"   prop="manualValue" v-if="tableType>0">
                        <template slot-scope="scope" v-if="scope.row.inspectResult!='合格'">
                            <el-form-item :prop="'tableList.' + scope.$index+'.manualValue'" :rules="rules.manualValue" >
                                <el-input v-model="scope.row.manualValue" clearable size="mini" :disabled="tableType!=1"/>
                            </el-form-item> 
                        </template>
                    </el-table-column>
                    <el-table-column label="复检结果"   width="110"   prop="manualResult" v-if="tableType>0">
                        <template slot-scope="scope" v-if="scope.row.inspectResult!='合格'">
                            <el-form-item :prop="'tableList.' + scope.$index+'.manualResult'" :rules="rules.manualResult">
                                <el-select  v-model="scope.row.manualResult" filterable size="mini" :disabled="tableType!=1"  >          
                                    <el-option size="mini" v-for="item in manualResultlist" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </template>
                    </el-table-column>

                    <el-table-column label="二次复检值"   width="110"   prop="manualValueTwo" v-if="tableType>1">
                        <template slot-scope="scope" v-if="scope.row.manualResult!='合格'">
                            <el-form-item :prop="'tableList.' + scope.$index+'.manualValueTwo'" :rules="rules.manualValueTwo">
                                <el-input v-model="scope.row.manualValueTwo" clearable size="mini" :disabled="tableType!=2"/>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="二次复检结果"   width="110"   prop="manualResultTwo" v-if="tableType>1">
                        <template slot-scope="scope" v-if="scope.row.manualResult!='合格'">
                            <el-form-item :prop="'tableList.' + scope.$index+'.manualResultTwo'"  :rules="rules.manualResultTwo">
                                <el-select  v-model="scope.row.manualResultTwo" filterable size="mini" :disabled="tableType!=2">          
                                    <el-option size="mini" v-for="item in manualResultlist" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    
                </el-table>
            </el-form>
                 
            <!-- <el-button @click="submitAddForm">123</el-button> -->
        </div>
      
</template>

<script>
 

export default {
    name: 'InspectionTable',
     
    props: {
        disabled:{
            type:Boolean,
            default:false
        },
        tasksDeailslist: {
            type:[ Array , Object],
            default:()=>{},
        },
        // 0 查看 1:一次复检 2:二次复检
        tableType:{
            type:[String,Number],
            default:'0'
        }
    },
    watch: {
        tasksDeailslist:{
            handler(newVal) {

                if (newVal?.length) {
                    // this.tableList=this.tasksDeailslist
                    this.formTable.tableList=this.tasksDeailslist
                    this.$forceUpdate()
                }else{
                    // this.tableList=[]
                    this.formTable.tableList=[]
                }
            },
            deep: true,
            immediate: true,
        }
    },
    data() {
        return {
            
            tableList: [],
            // 表单校验
            rulesForm: {
                tableList:[]
            },
            loading: false,
            fullscreen: false,
            templateVisible: false,
            tableHeight: '300',
            formTable:{

            },
            manualResultlist:[
                {value:"合格",label:"合格"},
                {value:"不合格",label:"不合格"},
            ],
            rules:{
                manualValue:[{ required: true, message: '人工复检值不能为空', trigger: 'blur'   }],
                manualResult:[{ required: true, message: '复检结果不能为空', trigger: 'change'   }],
                manualValueTwo:[{ required: true, message: '二次复检值不能为空', trigger: 'blur'   }],
                manualResultTwo:[{ required: true, message: '二次复检结果不能为空', trigger: 'change'   }]
            }
        }
    },
    
    
    created() {
        
    },
     
    methods: {
         
        /** 发起检验提交 */
        submitTableForm: function () {
            // console.log(JSON.stringify(this.formTable.tableList),9999999999)
             
            if (this.disabled) {
                this.$emit('callback', this.formTable.tableList)
            } else {
                this.$refs['formTable'].validate((val, error, three) => {
                    console.log(this.$refs['formTable'].fields)
                    if (val) {
                        this.$emit('callback', this.formTable.tableList)
                    } else {
                        let validateMessage = ''
                        this.$refs['formTable'].fields.forEach((io) => {
                            if (
                                io.validateMessage &&
                                io.validateMessage.length > 0
                            ) {
                                validateMessage = io.validateMessage
                            }
                        })
                        if (validateMessage.length > 0) {
                            this.$modal.msgError(validateMessage)
                        } else {
                            this.$modal.msgError(
                                '内容填写不完整,请仔细检查后再确定!'
                            )
                        }
                    }
                })
            }
        },
      
       
         
    },
}
</script>

model和data属性要一样

使用elementui动态添加表单并校验_表单_02

循环出来的表格不能直接使用list数组变量名,要 属性名.数组名

rulesForm: {
                tableList:[]
            }

使用elementui动态添加表单并校验_elementui_03

props :属性名.index.参数名 (参数名:v-mode变量名)

使用elementui动态添加表单并校验_表单_04

这两参数要一致


举报

相关推荐

0 条评论