vue中动态增减表单项，并实现新增时div的滑动条滑动到最底部

点击新增按钮，新增一条放到div的最后面，滑动条的位置也定位到最下面

 

1、 代码如下,dataList是个数组

<el-col :span="24">
            <el-form-item label="">
              <el-button  type="default" @click="handleAdd">新增</el-button>
            </el-form-item>
            <el-row class="overauto" id="scrolldIV">
              <el-col :span="22">
                 <el-form-item  v-for="(item,index) in dataList" :key="index" >
                   <div class="ladder">
                     <el-row>
                       <el-col :span="8">
                         <el-form-item :label="'名称' + (index+1)+':'" label-width="80px" >
                           <el-input placeholder="请输入名称" v-model="item.rangeName"></el-input>
                         </el-form-item>
                       </el-col>
                       <el-col :span="8">
                           <el-form-item label="开始日:" prop="startDate"  label-width="80px">
                             <el-date-picker
                               v-model="item.startDate"
                               type="date"
                               format="yyyy-MM-dd"
                               value-format="yyyy-MM-dd"
                               placeholder="选择开始日"
                               prefix-icon="iconfont icon-shijian"
                               clearable
                               >
                             </el-date-picker>
                           </el-form-item>
                       </el-col>
                       <el-col :span="8">
                           <el-form-item label="结束日:" prop="endDate"  label-width="80px">
                             <el-date-picker
                               v-model="item.endDate"
                               type="date"
                               format="yyyy-MM-dd"
                               value-format="yyyy-MM-dd"
                               placeholder="选择结束日"
                               prefix-icon="iconfont icon-shijian"
                               clearable
                               >
                             </el-date-picker>
                           </el-form-item>
                       </el-col>
                     </el-row>
                     <span ><i class="el-icon-error close-btn" @click="closeLadder(item)"></i></span>
                   </div>
                 </el-form-item>
              </el-col>

2、methods写新增，删除方法

 // 新增
      handleAdd(){
        let ln = this.dataList.length;
        if(ln>0){
          if(!this.dataList[ln-1].rangeName||!this.dataList[ln-1].startDate||!this.dataList[ln-1].endDate){
            this.$alert('请先填写完当前条件')
            return false
          };
          }
        this.dataList.push({
          pdRangeId:'',
          rangeName: this.dataList[ln-1].rangeName,
          startDate: this.dataList[ln-1].startDate,
          endDate:this.dataList[ln-1].endDate
        });
         //新增时滚动到div的最下面
         this.$nextTick(() => {
        　　 var container = this.$el.querySelector('#scrolldIV');
        　　　container.scrollTop = container.scrollHeight;
        })
      },
      // 删除
      closeLadder(item){
       var index = this.dataList.indexOf(item)
       if (index !== -1) {
         this.dataList.splice(index, 1)
       }
      },

 3、设置class，固定高度，超出高度显示滚动条

.overauto{ height:calc(100vh - 360px); overflow-y: auto;}