点击新增按钮,新增一条放到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;}