学习笔记

<template>  <div>  <el-form ref="ruleForm" :model="applyForm" :rules="applyRules">  <el-table  :data="applyForm.applyDataList"  border  stripe  >  <el-table-column label="*模拟充值">  <template slot-scope="scope">  <el-form-item :prop="'applyDataList.' + scope.$index + '.value3'" :rules="applyRules.value3">  <el-select v-model="scope.row.value3" placeholder="请选择模拟充值">  <el-option label="充值1" value="1"/>  <el-option label="充值2" value="2"/>  </el-select>  </el-form-item>  </template>  </el-table-column>   <el-table-column label="*申请数量">  <template slot-scope="scope">  <el-form-item :prop="'applyDataList.' + scope.$index + '.value4'" :rules="applyRules.value4">  <el-input v-model="scope.row.value4" placeholder="请输入申请数量"/>  </el-form-item>  </template>  </el-table-column>   <el-table-column label="消耗">  <template slot-scope="scope">  <span>{{ scope.row.value6 }}</span>  </template>  </el-table-column>   <el-table-column label="操作" width="100px;">  <template slot-scope="scope">  <el-button type="text" @click="delBtn(scope.$index)">删除</el-button>  </template>  </el-table-column>  </el-table>  </el-form>  <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>  </div> </template> <script> export default { data() { var checkAge = (rule, value, callback) => { if (!value) { return callback(new Error('年龄不能为空'));  } setTimeout(() => { if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));  } else { if (value < 18) {
            callback(new Error('必须年满18岁'));  } else {
            callback();  }
        }
      }, 10);  };  return { applyForm: { applyDataList: [{ value6: '111' }, { value6: '111' }]
      },  applyRules: { value3: [{ required: true, message: '请选择模拟充值', trigger: 'blur' }],  value4: [{ required: true,  pattern: /^\d+(\.\d{0,2})?$/,  message: '请输入保留2位小数',  trigger: 'blur'  }]
      }
    }
  },  methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { console.log(this.applyForm) alert('submit!')
        } else { console.log('error submit!!') return false  }
      })
    },  // 提交表单  saveEditBtn() { this.$refs.applyForm.validate((valid) => { if (!valid) { return false  } // TODO:  })
    }
  }
} </script>