当前位置：首页 > VUE

vue实现表格添加行

2026-02-24 21:59:52VUE

实现表格动态添加行的基础方法

在Vue中实现表格添加行功能，核心是利用响应式数据绑定。通过v-for指令渲染表格数据，操作数据数组即可动态更新表格。

准备表格数据数组：

data() {
  return {
    tableData: [
      { id: 1, name: '张三', age: 25 },
      { id: 2, name: '李四', age: 30 }
    ],
    newRow: { id: null, name: '', age: null }
  }
}

渲染表格的模板结构：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, index) in tableData" :key="row.id">
      <td>{{ row.id }}</td>
      <td>{{ row.name }}</td>
      <td>{{ row.age }}</td>
    </tr>
  </tbody>
</table>

添加新行的实现逻辑

通过方法向数组添加新数据实现行添加：

methods: {
  addRow() {
    if (!this.newRow.name || !this.newRow.age) return

    this.newRow.id = this.tableData.length + 1
    this.tableData.push({...this.newRow})
    this.resetNewRow()
  },
  resetNewRow() {
    this.newRow = { id: null, name: '', age: null }
  }
}

对应的添加按钮和输入表单：

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

使用计算属性优化ID生成

为避免ID重复问题，可以采用计算属性动态生成新ID：

computed: {
  nextId() {
    return this.tableData.length > 0 
      ? Math.max(...this.tableData.map(item => item.id)) + 1
      : 1
  }
}

修改addRow方法：

addRow() {
  this.tableData.push({
    id: this.nextId,
    name: this.newRow.name,
    age: this.newRow.age
  })
  this.resetNewRow()
}

使用Vuex管理表格数据（中大型项目）

对于复杂项目，建议使用Vuex集中管理状态：

store.js配置：

const store = new Vuex.Store({
  state: {
    tableData: []
  },
  mutations: {
    ADD_ROW(state, row) {
      state.tableData.push(row)
    }
  },
  actions: {
    addRow({ commit }, row) {
      commit('ADD_ROW', row)
    }
  }
})

组件中调用：

methods: {
  addRow() {
    this.$store.dispatch('addRow', {
      id: this.nextId,
      ...this.newRow
    })
    this.resetNewRow()
  }
}

实现可编辑表格行

结合添加行和编辑功能，实现完整CRUD操作：

添加编辑状态管理：

data() {
  return {
    editableRowId: null,
    editTempData: {}
  }
}

添加编辑方法：

editRow(row) {
  this.editableRowId = row.id
  this.editTempData = { ...row }
},
saveEdit() {
  const index = this.tableData.findIndex(item => item.id === this.editableRowId)
  this.$set(this.tableData, index, this.editTempData)
  this.cancelEdit()
}

vue实现表格添加行