vue + matriz elemento-ui de objectos complexos para autenticação formas

Título desenvolvimento do projeto vue +-ui-tipo do elemento da matriz de validação de formulário objetos complexos

1. cenário de demanda
   na recente desenvolvimento do projeto, que tem um módulo sobre sistemas de compras, compras não pode fazer para formulário de informações evitar a compra de livro, e a aquisição de informações e complexidade é adicionado dinamicamente, por isso requer a matriz mais complexa de objetos através do laço adicionar validação. Primeiro adicione uma imagem 1-1, esta verificação renderizações.
   
   Aqui alguma dúvida pode dar-lhe uma ah breve resposta. 1 dúvidas: por exemplo, por que não verificar as especificações, porque as regras são vinculativas e uma variedade de ingredientes, que é a base dos dados antes já havia sido feito. Portanto, verifique os ingredientes irá verificar se a presença ou ausência de dados de especificação. 2 perguntando: Por que são regras que proíbem alimentos e entrar, como para evitar que as informações dos clientes incorretamente, que é os requisitos do projeto, porque as pessoas diferentes preencher possibilidades N seria um repolho, couve chinesa chamada tais como A, B chamado de couve chinesa, C chamado repolho ... tipo, que não é propício para a parte de trás dos dados estão resumidos. Portanto, para adicionar uma caixa ao lado do botão de seleção de entrada para abrir os ingredientes página, ingredientes utilizados para selecionar dados. Como um amigo você tiver quaisquer outras perguntas que eu também pode ser privado.

2. Necessidade de verificar dados complexos objetos
   Agora vamos nos dados ao vivo na forma acima, como segue:

        dailyUseRecordForm:////新增、修改日消耗品登记信息中的选项信息
        {   date:'',//新增和修改日消耗品的登记日期
            gysName:'',//新增和修改日消耗品的供应商信息
            gysId:'',//新增和修改台账信息供应商id
            details:[
                { 
                      foodName:'',//新增和修改日消耗品的名称
                      spec:'',//新增和修改日消耗品的规格
                      num:'',//新增和修改日消耗品的数量
                      price:'',//新增和修改日消耗品的单价
                      foodId:'',//新增和修改台账信息食物id
                      id:''//该对象的id
                }
            ]
        },

	定义的表单数据类型如上所示，需要说明一下，初始的时候食材数据数组（dailyUseRecordForm.details）只有一条空数据，点击小“+”号按钮，或者下面的批量添加按钮都能往里面添加新的对象数据，下面是点击加号往里面添加一条数据后的样子：

        dailyUseRecordForm:////新增、修改日消耗品登记信息中的选项信息
        {   date:'',//新增和修改日消耗品的登记日期
            gysName:'',//新增和修改日消耗品的供应商信息
            gysId:'',//新增和修改台账信息供应商id
            details:[
                { 
                      foodName:'',//新增和修改日消耗品的名称
                      spec:'',//新增和修改日消耗品的规格
                      num:'',//新增和修改日消耗品的数量
                      price:'',//新增和修改日消耗品的单价
                      foodId:'',//新增和修改台账信息食物id
                      id:''//该对象的id
                },
                { 
                      foodName:'',
                      spec:'',
                      num:'',
                      price:'',
                      foodId:'',
                      id:''
                }
            ]
        },

3. Para dentro da porção distai validação forma principal
   (1) define as regras de validação forma:

dailyUseRecordRules:{//台账信息表单验证规则
            gysName:[
                { required: true, message: '请输入供应商名称', trigger: 'blur' },
                 { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },

            ],
            date: [
                { required: true, message: '请选择日期', trigger: 'blur' },
                // { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
            ],
            foodName:[//食材名称
                { required: true, message: '请选择食材', trigger: 'blur' },
                { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' },
            ],
            num:[
                { required: true, message: '请输入数量', trigger: 'blur' },
                {
                    required: false,
                    pattern: /(^[1-9]\d*$)/,
                    message: '数量格式有误',
                    trigger: 'blur'
                }
            ],
            price:[
                { required: true, message: '请输入价格', trigger: 'blur' },
                {
                    required: false,
                    pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
                    message: '价格格式有误',
                    trigger: 'blur'
                }
            ]
  }

Estas regras são a validação do formulário necessita de ser usado, são definidos no arranjo de dados.
(2) validação de formulário
porque o tópico de hoje é objeto complexo percurso de verificação, de modo que só analisar como validação de dados complexas estruturas de dados, que é um array de objetos acima 'dailyUseRecordForm.details' em. Como percorrer a matriz para adicionar validação para cada elemento.

<div v-for="(item,index) in dailyUseRecordForm.details :key="index">
    <el-form-item label="name" :prop="`details[${index}].foodName`" :rules="dailyUseRecordRules.foodName">
       <el-input   v-model="item.foodName"></el-input>
   </el-form-item>
   <el-form-item label="name" :prop="`details[${index}].num`" :rules="dailyUseRecordRules.num">
       <el-input   v-model="item.num"></el-input>
   </el-form-item>
  <el-form-item label="name" :prop="`details[${index}].price`" :rules="dailyUseRecordRules.price">
       <el-input   v-model="item.price"></el-input>
   </el-form-item>
</div>

		以上的几行代码便是解决表单验证的核心所在，因为自己的页面中有按钮，占位符等不利于观察的因素，所以先给出一个思路。下面是自己实际中的情况，其实这个没有看到必要，只是为了增加一点实际的项目代入感，我还是粘上，想看的人看，不想看的人忽略。

<el-form-item   v-for='(item,index) in dailyUseRecordForm.details' :label=" '食材'+(index+1) "  :key="index">
                <el-form-item label='名称' :prop="`details[${index}].foodName`" :rules='dailyUseRecordRules.foodName'>
                <el-input v-model="item.foodName" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.name :disabled="true">	 </el-input>
                <el-button  icon="el-icon-search" @click='searchDialogOpen(index)'></el-button>
              </el-form-item>
              <el-form-item label='规格'>
                <el-input   v-model="item.spec  :placeholder=dailyUseRecordMessage.spec  :disabled="true"></el-input >
              </el-form-item>
              <el-form-item label='数量' :prop="`details[${index}].num`" :rules='dailyUseRecordRules.num'>
                <el-input v-model="item.num" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.num clearable></el-input>
              </el-form-item>
              <el-form-item label='单价' :prop="`details[${index}].price`" :rules='dailyUseRecordRules.price'>
                <el-input v-model="item.price" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.price clearable></el-input>
                <span>元</span><span  v-show="item.spec === '' ? false : true" >/{{item.spec}}</span>
              </el-form-item> 
              <el-form-item style="display:inline-block;">
                <el-button icon='el-icon-delete' @click="delFoodDetail(index)"></el-button>
              </el-form-item> 
              <el-form-item style="display:inline-block;" v-if="index === Number(dailyUseRecordForm.details.length)-1">
                <el-button icon='el-icon-plus' @click="addFoodDetail"></el-button>
              </el-form-item>
  </el-form-item> 

4. seção de resumo
   de validação de formulário dinâmico é a linha oficial dada para o caso do objeto matriz tem apenas uma propriedade necessidade de verificar se você precisa para atravessar o objeto de dados tem vários atributos requer autenticação, você precisa fazer o mesmo que eu descrevi acima modificação. Há questões sobre os meus amigos particulares podem, vamos discutir.