当前位置：首页 > VUE

vue实现表格添加功能

2026-01-22 19:54:43VUE

实现表格添加功能的基本思路

在Vue中实现表格添加功能通常涉及以下几个核心步骤：数据绑定、表单输入处理、数据更新和DOM渲染。下面将分步说明具体实现方法。

数据准备与表格渲染

定义表格数据和列结构，使用v-for指令渲染表格内容。假设表格数据存储在tableData数组中，每行数据为对象形式。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.key">{{ col.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in tableData" :key="index">
        <td v-for="col in columns" :key="col.key">{{ row[col.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { key: 'name', title: '姓名' },
        { key: 'age', title: '年龄' }
      ],
      tableData: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
      ]
    }
  }
}
</script>

添加表单输入控件

创建表单用于输入新数据，通过v-model实现双向绑定。新增一个newItem对象存储输入内容。

<template>
  <div>
    <input v-model="newItem.name" placeholder="姓名">
    <input v-model="newItem.age" placeholder="年龄" type="number">
    <button @click="addItem">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: { name: '', age: null }
    }
  }
}
</script>

实现添加方法

在methods中定义addItem方法，将新数据推入tableData数组。注意添加前应进行简单验证。

vue实现表格添加功能

methods: {
  addItem() {
    if (!this.newItem.name || !this.newItem.age) return
    this.tableData.push({ ...this.newItem })
    this.newItem = { name: '', age: null } // 清空表单
  }
}

完整组件示例

整合上述代码的完整组件实现：

<template>
  <div>
    <div>
      <input v-model="newItem.name" placeholder="姓名">
      <input v-model="newItem.age" placeholder="年龄" type="number">
      <button @click="addItem">添加</button>
    </div>
    <table>
      <thead>
        <tr>
          <th v-for="col in columns" :key="col.key">{{ col.title }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in tableData" :key="index">
          <td v-for="col in columns" :key="col.key">{{ row[col.key] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { key: 'name', title: '姓名' },
        { key: 'age', title: '年龄' }
      ],
      tableData: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
      ],
      newItem: { name: '', age: null }
    }
  },
  methods: {
    addItem() {
      if (!this.newItem.name || !this.newItem.age) return
      this.tableData.push({ ...this.newItem })
      this.newItem = { name: '', age: null }
    }
  }
}
</script>