实现功能
<template> <div class="dynamicTable" id="carryOutForm"> <el-table ref='editTable' border :data="value"> <el-table-column type="index" label="序号" width="60"></el-table-column> <el-table-column prop="value" label="营养名称" align="center"></el-table-column> <el-table-column prop="unit" label="营养单位" align="center"></el-table-column> <el-table-column prop="nutritionContent" label="营养含量" align="center"></el-table-column> <el-table-column label="操作" class-name="small-padding fixed-width" align="center" width="100"> <template slot-scope="scope"> <el-button type="text" style="color: #fdc800;" size="mini" @click.native.prevent="deleteRow(scope.$index)">删除行</el-button> </template> </el-table-column> </el-table> <div class="addBtn_box"> <el-button size="mini" type="text" @click="handleAdd">添加行</el-button> </div> </div> </template>
// 添加行 handleAdd() { const reg = this.validate(); if (reg){ const arr = { id:'', nutritionId: '', unit: '', nutritionContent: '', }; this.value = this.value.push(arr); //点击添加行表格定位到底部 this.$nextTick(()=>{ this.$refs.editTable.bodyWrapper.scrollTop = this.$refs.editTable.bodyWrapper.scrollHeight; )} }, // 删除行 deleteRow(index) { this.value.splice(index, 1); },