实现一个表格添加新行或删除当行的表格编辑工具功能；

为了实现满足所有信息的编辑，排除因为表格不够又需手动添加新行，或者因为空表格占位太多，显得页面臃肿，为此需要根据当下的数据实现表格的添加新行或删除当行功能；

以上就是点击右边蓝色增加按钮会实现新行，代码如下：

  <table width="100%" border="1" class="mzsqfsTab" style="border-top: 1px solid #95B8E7;text-align:center;">
              <tr>
                <td style="width: 3vw;">序号</td>
                <td>类别</td>
                <td>用药时间</td>
                <td>药品名称</td>
                <td>规格</td>
                <td>单位</td>
                <td>一次用量</td>
                <td>用量单位</td>
                <td>操作</td>
              </tr>
              <tr v-for="(item, index) in formInput.yaoList" :key="index">
                <td>{{ index + 1 }}</td>
                <td>
                  <el-select v-model="item.type" class="diagInput" clearable>
                    <el-option v-for="itm in types" :key="itm.dictCode" :label="itm.dictLabel" :value="itm.dictValue">
                    </el-option>
                  </el-select>
                </td>
                <td>
                  <el-date-picker style="width:12vw" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"
                    v-model="item.dateTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </td>
                <td>
                  <el-select style="width:15vw" clearable v-model="item.yaoName" @visible-change="selectVisible"
                    :remote-method="remoteMethod" filterable remote class="diagInput">
                    <el-option v-for="(itm, ii) in yaoNameList" :key="ii" :value="itm.drugName" :label="itm.drugName"
                      @click.native="handleOptionClick(itm, index)">
                    </el-option>
                  </el-select>
                </td>
                <td><el-input style="width: 100%" v-model="item.spec" class="diagInput"></el-input></td>
                <td>
                  <el-select v-model="item.unit" class="diagInput" clearable filterable allow-create>
                    <el-option v-for="itm in unitList" :key="itm.id" :label="itm.name" :value="itm.name">
                    </el-option>
                  </el-select>
                </td>
                <td><el-input style="width: 100%" v-model="item.dosage" class="diagInput"></el-input></td>
                <td>
                  <el-select v-model="item.dosageUnit" class="diagInput" clearable filterable allow-create>
                    <el-option v-for="itm in unitList" :key="itm.id" :label="itm.name" :value="itm.name">
                    </el-option>
                  </el-select>
                </td>
                <td>
                  <el-button v-if="index == 0" style="background:#21C0BB;color: #fff;" icon="el-icon-plus"
                    @click="addYao()" size="mini"></el-button>
                  <el-button v-else type="danger" icon="el-icon-delete" @click="delYaoRow(index)"
                    size="mini"></el-button>
                </td>
              </tr>
            </table>

 data() {

    formInput: {},

}，
methods:{
    //增加一行药物
   addYao() {
      let obj = {
        type: '',
        dateTime: '',
        yaoName: '',
        spec: '',
        unit: '',
        dosage: '',
        dosageUnit: '',
      }
      this.formInput.yaoList.push(obj)
    },
   //删除药物
    delYaoRow(i) {
      if (this.formInput.yaoList.length <= 1) {
        this.$message.warning('最少保留一条药物')
        return
      }
      this.formInput.yaoList.splice(i, 1)
    },

}

 

 添加新行按钮事件是addYao这个函数，点击后会将obj这个对象添加到formInput该对象的yaoList这个数组当中，这样就实现了新增新行的功能。

那删除也很简单， 下图中红色的按钮点击后就会删除当行，执行的是delYaoRow这个函数，当然要将当行的索引值拿到，就可以进行当行的删除了。