iview 動態實現增減輸入框

前端模版

要點說明（僅是自己在調試中總結的個人理解，非官方，認知有限）

• v-model是用來綁定數據的，和數據結構中的字段名保持一致，否則無法取得數據
• prop和和v-model的字段名相同，由於這里是動態生成input標簽，所以prop屬性也應該是動態的，因為rules是根據prop來校驗的，所以rules在formItem域中單獨設置
• 如果設置了非空的規則，輸入數據后檢查不通過，則應該是prop和v-model設置的不同原因導致
• 為了使兩個輸入框同行顯示，這里每列設置單獨的formItem（嘗試了N中寫法實現的）

<Form ref="applyInfo" :model="applyInfo" :rules="rules">
        <Card>
          <p slot="title">
            <Icon type="ios-chatboxes"></Icon>
            生產者白名單新增
          </p>
          <div id="produce">
            <FormItem>
              <Row>
                <Col span="12">
                    <Button type="primary" @click="addProduceData">添加</Button>
                </Col>
              </Row>
            </FormItem>
             <Row v-for="(item, index) in applyInfo.produceData.items" v-if="item.status" :key="index">
              <Col span="6" >
                <FormItem label="topic" :prop="'produceData.items.'+index+'.value.topic'" :label-width=110  :rules="[{required:true,message:'topic不能為空',trigger:'blur'}]">
                    <Input v-model="item.value.topic"  placeholder="輸入topic名稱"/>
                </FormItem>
              </Col>
              <Col span="6"  offset=1>
                <FormItem label="白名單bns" :prop="'produceData.items.'+index+'.value.bns'" :label-width=110 :rules="[{required:true,message:'topic不能為空',trigger:'blur'}]">
                    <Input v-model="item.value.bns" placeholder="輸入生產者bns白名單"/>
                </FormItem>
              </Col>
              <Col span="6" offset="1">
                <Button type="error" @click="deleteRow(index)">刪除</Button>  
              </Col>
              </Row>
          </div>
        </Card>
        </form>

js部分

<script>
export default {
    data() {
      return {
        index:1,
        applyInfo: {
            produceData:{
             items:[
              {
                
              }
            ]
          },
        },
    },
　　　methods: {
      addProduceData(){
        this.index++;
        this.applyInfo.produceData.items.push({
          value:{
            topic:'',
            bns:''
          },
          index: this.index,
          status:1
        })  
      },
}   

效果