<template>
  <div>
    <tr v-for="(item, index) in formArr" :key="index">
      <td>
        <el-input v-model="item.value1" placeholder="请输入" />
      </td>
      <td>
        <el-input v-model="item.value2" placeholder="请输入" />
      </td>
      <td>
        <el-input v-model="item.value3" placeholder="请输入" />
      </td>
      <td>
        <i
          class="el-icon-circle-plus-outline"
          v-if="index === 0"
          @click="add"
        ></i>
        <i v-else class="el-icon-remove-outline" @click="del(index)"></i>
      </td>
    </tr>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formArr: [
        {
          value1: "",
          value2: "",
          value3: "",
        },
      ],
    };
  },
  methods: {
    add() {
      this.formArr.push({
        value1: "",
        value2: "",
        value3: "",
      });
    },
    del(index) {
      this.formArr.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.el-icon-circle-plus-outline,
.el-icon-remove-outline {
  margin-left: 10px;
  font-size: 30px;
  height: 100%;
  position: relative;
  top: 5px;
  cursor: pointer;
}
</style>