iview 动态实现增减输入框

2020-06-14 17:58:07 阅读：422 来源： 互联网

标签：index items prop 输入框设置增减 model 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
        })  
      },
}

效果

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

iview 动态实现增减输入框