vue2动态增减表单项

最新推荐文章于 2025-02-18 15:37:41 发布

小李很认真

最新推荐文章于 2025-02-18 15:37:41 发布

阅读量228

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/lingrer/article/details/144699632

版权

实现效果：

在elementUI也可以实现动态增减表单项，但是不满足我的需求

代码实现：

html

<div>
      <div class="select-box" v-for="(item, index) in dataItem" :key="index" :value="item.key" >
       <el-form-item label="金额+明细" prop="inboundMoneyDetail" class="red-label">
       <div class="Vehicle-model">
       <el-select v-model="dataItem[index].denominationValue" clearable placeholder="请选择金额" @change="selectMoney($event,index)">
        <el-option v-for="item in amountlist" :key="item.itemValue" :value="item.itemValue" :label="item.itemText"></el-option>
        </el-select>
       </div>
       </el-form-item>
         <el-form-item>
           <div class="input" >
            <el-input v-model="dataItem[index].cnt" placeholder="请输入现金张数" ></el-input>
            </div>
            <i class="el-icon-remove" @click="removeDomain(item,index)" v-if="index !=0"></i>
            <i class="el-icon-circle-plus-outline" @click="addFormItem" v-else></i>
            </el-form-item>
         </div>
     </div>

css：主要是加号和减号的样式

.el-icon-remove {
  color: #6bb1fd;
  font-size: 22px;
  position: absolute;
  top: 11px;
  left: 136px;
  padding-left: 5px;
}
.el-icon-circle-plus-outline {
  color: #f73f11;
  font-size: 22px;
  position: absolute;
  top: 11px;
  left: 136px;
  padding-left: 5px;
}

js：

dataForm: {
  inboundMoneyDetail:[
     {
       denomnText:'',//面额
       denomValue:'',//面额值
       cnt:'',//数量
        },
     ], 
    },
    dataItem: [
        {
          denomText:'',//面额
          denomValue:'',//面额值
          cnt:'',//数量
        }
      ], 


 addFormItem() {
       let content =this.dataItem[this.dataItem.length - 1];
       if (!content.denomValue|| !content.cnt) {
        this.$message.error(
          `请先完成金额＋明细第${this.dataItem.length}条内容必填项`
        );
        return;
      }
      let reg = /^[1-9]\d*$/;
      if (!reg.test(content.cnt)) {
        this.$message.error("现金张数只能为正整数");
        return;
      }
      this.dataItem.push({ denomValue: this.dataItem.denomValue, denomnText:this.dataItem.denomnText,cnt:this.dataItem.cnt });
    },
    // 点击删除添加一个新的表单项数据对象
    removeDomain(item, index) {
      this.dataItem.splice(index, 1);

    },

注意的是当表单重置的时候dataItem也需要重置

resetHandle() {
      Object.keys(this.dataForm).forEach(key=>{this.dataForm[key]=''})
       this.dataItem=[{
          denomText:'',//面额
          denomValue:'',//面额值
          cnt:'',//数量
      }]
    },