其他分享
首页 > 其他分享> > iview 动态实现增减输入框

iview 动态实现增减输入框

作者:互联网

前端模版

要点说明(仅是自己在调试中总结的个人理解,非官方,认知有限)

<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 })
}, }

效果

 

标签:index,items,prop,输入框,设置,增减,model,iview
来源: https://www.cnblogs.com/Bccd/p/13125831.html