vue.js按钮点击往下添加一行数据

admin 2026年02月09日 15:10 102 0

Vue.js中实现按钮点击动态添加数据行，核心在于数据绑定与响应式更新，首先在data中定义数组存储数据行，如tableData: []；按钮绑定点击事件@click="addRow"，事件处理函数中通过this.tableData.push({字段: 值})新增数据对象；利用v-for指令遍历tableData渲染列表，Vue的响应式系统会自动同步视图更新，适用于表单动态添加、数据列表扩展等场景，实现简单高效，无需操作DOM即可完成数据与视图的双向同步。

Vue.js 实现按钮点击动态添加数据行详解

在 Web 开发中，动态添加数据行是非常常见的需求，比如表单扩展、列表展示、数据录入等场景，Vue.js 作为一款流行的前端框架，其响应式数据绑定和组件化特性让这类需求变得简单高效，本文将详细介绍如何使用 Vue.js 实现通过按钮点击动态向下添加数据行的功能，包含核心思路、完整代码示例及扩展技巧。

环境准备

在开始之前，确保你已安装 Vue.js 开发环境，本文以 Vue 3（组合式 API）为例，Vue 2 的实现思路类似，仅 API 写法略有差异，你可以通过以下方式快速创建 Vue 项目：

# 使用 Vite 创建 Vue 3 项目（推荐）
npm create vue@latest

创建后进入项目目录，启动开发服务器：

cd your-project
npm run dev

核心实现思路

动态添加数据行的核心逻辑是：通过按钮点击事件，向存储数据行的数组中新增一个元素，利用 Vue 的响应式特性，自动触发视图更新，具体步骤如下：

定义响应式数据：使用 ref 或 reactive 定义一个数组，用于存储每一行的数据。
创建模板结构：渲染数据列表（如表格、列表组等），并添加一个“添加”按钮。
绑定点击事件：为按钮绑定点击事件处理函数，在函数中向数组添加新数据。
渲染动态行：通过 v-for 指令遍历数组，动态生成每一行的 DOM 结构。

完整代码实现

下面是一个完整的示例，实现一个简单的表格，点击“添加一行”按钮时，在表格末尾新增一行空白数据,并支持输入和删除。

组件代码（`App.vue`）

<template>
  <div class="container">
    <h2>Vue.js 动态添加数据行</h2>
    <!-- 表格区域 -->
    <table class="data-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 遍历数据行，动态渲染 -->
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.id }}</td>
          <td>
            <input 
              type="text" 
              v-model="item.name" 
              placeholder="请输入姓名"
            />
          </td>
          <td>
            <input 
              type="number" 
              v-model="item.age" 
              placeholder="请输入年龄"
            />
          </td>
          <td>
            <button class="delete-btn" @click="deleteRow(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 添加按钮 -->
    <div class="actions">
      <button class="add-btn" @click="addRow">添加一行</button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 响应式数据：存储表格行数据
const tableData = ref([
  { id: 1, name: '张三', age: 25 }, // 初始示例数据
  { id: 2, name: '李四', age: 30 }
])
// 添加一行数据
const addRow = () => {
  // 生成唯一 ID（简单使用时间戳，实际项目可能需更严谨的方式）
  const newId = Date.now()
  // 向数组末尾添加新行
  tableData.value.push({
    id: newId,
    name: '',
    age: ''
  })
}
// 删除指定行
const deleteRow = (id) => {
  // 通过 filter 过滤掉要删除的行
  tableData.value = tableData.value.filter(item => item.id !== id)
}
</script>
<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}
h2 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}
.data-table {
  width: 100%;
  border-collapse: collapse;