Vue-动态生成输入框并校验

一、需求

        要展示后端接收的卡号列表并可以做卡号内容修改，同时完成输入框的动态增加与删减实现卡号的增删。

        对动态生成的输入框要进行动态输入校验。

二、使用步骤

1.表单部分（el-form、el-input）

代码如下（示例）：

       
              
              

              

       
其中的 :prop="'cardList.' + index + '.cardNo'"就是动态校验的关键，接收后端卡号数据的cardList需要一个cardForm外层包裹。

添加输入框的加号保持在最后一个输入框之后，删减输入框的减号保持在每个输入框之后。

2.data部分

代码如下（示例）：

cardForm:{
             cardList:
             [
                 {cardNo:''}
             ],
},

cardList中需要先声明了一个cardNo为空，否则第一个初始输入框不显示，就不能进行操作了。同时如要从后端获取卡号时，需将空的cardNo去除，否则会多一个空的框，语句为this.cardForm.cardList = []

---

3.js部分

代码如下（示例）：

addItem() {
           this.cardForm.cardList.push({
              cardNo:''
              });
            },
deleteItem(item, index) {
      if(this.cardForm.cardList.length == 1){                     
          this.cardForm.cardList[0].cardNo = ''
       else{
           this.cardForm.cardList.splice(index, 1);
       }
},

没添加一个输入框就为cardList添加一个为空的cardNo，值得需要注意的是在删减输入框时为了配合需求，在只剩一个输入框时点击删减按钮只将框内卡号去除（置为空），而不将框移除，可以配合表单部分的按钮div结合查看：

v-if="index!==0 || index+1 !== cardForm.cardList.length || item.cardNo"

4.css部分

代码如下（示例）：

.btn {
	   /* display: inline-block; */
	   float: left;
	   margin-left: 2px;
	    background: #f0f0f0 no-repeat center;
	    border: 1px solid #d0d0d0;
	    width: 26px; 
		height: 28px;   
	    border-radius: 2px;
	    box-shadow: 0 1px rgba(100,100,100,.1);
	    color: #666;
	    transition: color .2s, background-color .2s;
	}
	.btn:active {
	    box-shadow: inset 0 1px rgba(100,100,100,.1);
	}
	.btn:hover {
	    background-color: #e9e9e9;
	    color: #3399ff;
		border: 1px solid #3399ff;
	}
	.btn-plus {
	    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
	    background-size: 10px 2px, 2px 10px;
	}
	.btn-minus {
	    background-image: linear-gradient(to top, currentColor, currentColor);
	    background-size: 10px 2px;
	}