開発プロセスでは、時には我々は、ページの内容であるべきときに比較的複雑なサービス制御のパーティションブロックのコンテンツの範囲が提出したフォームコンテンツビジネス要件に基づいて、問題を見つけるために、問題の外観や他の長い時間後のメンテナンス、保守投稿するので、簡単にいくつかのコンポーネント持って大きな頭に分かれていますインクルード
基本設定に図のページの形で示されるように、棚を設定、我々は、フォーム検証のフォームを送信するチャンクは、3つの成分(A、B、C)に書き込まれる3,3それぞれ複数のチャンクを提供
アイデア:非同期制御ES6約束の使用
コードは以下の通りです
组件A <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="套卡名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> </el-form>
组件B <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="上架范围" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> </el-form>
组件C <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="开票" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> </el-form>
HTML代码如下
<template> <div class="product-card-page"> <!-- basic --> <basic ref="basic" :data="basicInfo" :disabled="disabled" @deductAmountTypeChange="deductAmountTypeChange" /> <!-- onshelf --> <on-shelf ref="onshelf" :discount="discount" :data="onshelfInfo" :tag="tags" :disabled="disabled" /> <!-- more --> <more ref="more" :data="moreInfo" :disabled="disabled" /> <!-- submit --> <div v-show="!disabled" class="btns_row tc mt60 mb50"> <el-button round size="mini" style="width:78px;" @click="$router.push('/product/card')"> 取消 </el-button> <el-button round type="primary" size="mini" style="width:78px;" @click="submit"> 保存 </el-button> </div> </div> </template>
JS代码如下:
import OnShelf from './components/OnShelf'
import Basic from './components/Basic'
import More from './components/More'
submit(){
const p1=
new Promise((resolve,reject)=>
{
this.$refs['basic'].$refs['ruleForm'].validate(valid=>{ if(valid) resolve() }) }) const p2=new Promise((resolve,reject)=>{ this.$refs['onshelf'].$refs['ruleForm'].validate(valid=>{ if(valid) resolve() }) }) const p3=new Promise((resolve,reject)=>{ this.$refs['more'].$refs['ruleForm'].validate(valid=>{ if(valid) resolve() }) }) Promise.all([p1,p2,p3]).then(()=>{ console.log('验证通过,提交表单') })
}
欢迎大家学习讨论更好的方法