Vue 3实现点击按钮动态添加表格行（无默认初始行）

只需要做一处核心修改，再确认方法逻辑即可实现需求：

修改步骤 #

• 将data中的tableRows初始化为空数组，移除默认的测试数据行
• 原insert_Row方法的ID生成逻辑无需修改，因为数组为空时this.tableRows.length + 1会自动生成第一行的ID为1，后续新增行ID也会依次递增

修改后的完整代码 #

<template>
    <table>
        <tbody>
            <tr v-for="(item, index) in tableRows" :key="item.id">
                <td>D{{item.id}}</td>
                <td><input type="text" v-model="item.Filename"></td>
                <td><input type="text" v-model="item.ImageTitle"></td>
                <td><input type="text" v-model="item.Caption"></td>
            </tr>
        </tbody>
    </table>
   <button @click.stop="insert_Row">add row +</button>
   
   <div v-for="item in tableRows" :key="item.id">
     {{item}}
   </div>  
</template>

<script>
export default {
  data() {
    return {
      // 初始化为空数组，移除默认行
      tableRows: []
    }
  },
  methods: {
    insert_Row() {
      this.tableRows.push(
        {
          "id": this.tableRows.length + 1,
          "Filename": "",
          "ImageTitle": "",
          "Caption": ""
        }
      )
    }
  }
}
</script>

说明 #

页面加载完成后，表格和下方的预览区域都会是空的，只有点击add row +按钮时才会添加第一行空数据，再次点击会继续新增后续行，完全符合需求。

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