VueJS中点击元素追加表格行且仅最后一行显示加号如何实现？

修改后的完整可运行代码如下：

<template>
  <table id="myTable">
    <tbody>
      <!-- 所有行统一遍历渲染，初始行数由初始数据控制 -->
      <tr v-for="(item, index) in tableRows" :key="item.id">
        <td scope="row" data-label="">{{`D${item.id}`}}</td>
        <td data-label="Filename">
          <input type="text" v-model="item.Filename">
        </td>
        <td data-label="Image Title">
          <input type="text" v-model="item.ImageTitle">
        </td>
        <td data-label="Caption">
          <input type="text" v-model="item.Caption">
        </td>
        <td class="addrow" data-label="Add">
          <!-- 仅最后一行显示加号按钮 -->
          <a class="add-link" v-if="index === tableRows.length - 1">
            <span @click.stop="insert_Row" class="plus-icon">+</span>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  data() {
    return {
      // 初始配置3条数据，对应初始展示3行需求
      tableRows: [
        {
          "id": 1,
          "Filename": "",
          "ImageTitle": "",
          "Caption": ""
        },
        {
          "id": 2,
          "Filename": "",
          "ImageTitle": "",
          "Caption": ""
        },
        {
          "id": 3,
          "Filename": "",
          "ImageTitle": "",
          "Caption": ""
        }
      ]
    }
  },
  methods: {
    insert_Row() {
      // 取最后一行的id+1作为新行id，逻辑更严谨避免重复
      const newId = this.tableRows[this.tableRows.length - 1].id + 1
      this.tableRows.push({
        "id": newId,
        "Filename": "",
        "ImageTitle": "",
        "Caption": ""
      })
    }
  }
}
</script>
<style lang="scss">
td,
th {
  padding: .4rem;

  &.addrow {
    border: 0 none;
    width: 2.3rem;
    padding: 1.7rem 0 0 0;
    vertical-align: middle;
    text-align: center;
  }
}

td .plus-icon {
  border: 1px solid cornflowerblue;
  background-color: cornflowerblue;
  color: #fff;
  text-align: center;
  padding: 0 .7rem;
  box-sizing: border-box;
  border-radius: 50%;
  transition: all ease-in-out .4s;

  &:hover,
  &:focus {
    border: 1px solid #182241;
    background-color: #182241;
  }
}
</style>

核心改动说明 #

• 移除了原代码中硬编码的前两行DOM，所有表格行统一通过遍历tableRows数组渲染，初始直接配置3条数据即可实现初始展示3行的需求，后续要调整初始行数只需要修改初始数组长度即可
• 给加号按钮加上了v-if="index === tableRows.length - 1"的条件判断，只有当前遍历到的是数组最后一项（也就是表格最后一行）时，才会渲染加号按钮，其余行的操作列默认留空
• 优化了新增行的id生成逻辑，改为取当前数组最后一项的id加1，避免后续如果有删除行的操作时，用数组长度计算id出现重复的问题

内容的提问来源于stack exchange，提问作者karimlo