添加行

实现功能

<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);
},