当前位置：首页 > VUE

vue实现添加行

2026-02-19 06:02:32VUE

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

在 Vue 中实现动态添加表格行通常涉及数据驱动的方式，通过操作数据数组来实现视图更新。以下是几种常见实现方式：

使用 v-for 渲染表格行

通过维护一个数组数据，使用 v-for 指令动态渲染表格行：

<template>
  <table>
    <tr v-for="(row, index) in rows" :key="index">
      <td>{{ row.name }}</td>
      <td>{{ row.age }}</td>
      <td>
        <button @click="removeRow(index)">删除</button>
      </td>
    </tr>
  </table>
  <button @click="addRow">添加行</button>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
      ]
    }
  },
  methods: {
    addRow() {
      this.rows.push({ name: '', age: 0 })
    },
    removeRow(index) {
      this.rows.splice(index, 1)
    }
  }
}
</script>

使用表单绑定的动态行

当需要收集用户输入时，可以使用 v-model 绑定表单元素：

<template>
  <table>
    <tr v-for="(row, index) in formData" :key="index">
      <td><input v-model="row.name" placeholder="姓名"></td>
      <td><input v-model="row.age" type="number" placeholder="年龄"></td>
    </tr>
  </table>
  <button @click="addRow">添加行</button>
  <button @click="submit">提交</button>
</template>

<script>
export default {
  data() {
    return {
      formData: []
    }
  },
  methods: {
    addRow() {
      this.formData.push({ name: '', age: '' })
    },
    submit() {
      console.log(this.formData)
    }
  }
}
</script>

使用组件化方式

对于复杂表格，可以拆分为子组件：

<template>
  <table>
    <TableRow 
      v-for="(row, index) in rows" 
      :key="index" 
      :row="row"
      @remove="removeRow(index)"
    />
  </table>
  <button @click="addRow">添加行</button>
</template>

<script>
import TableRow from './TableRow.vue'

export default {
  components: { TableRow },
  data() {
    return {
      rows: []
    }
  },
  methods: {
    addRow() {
      this.rows.push({ name: '', age: 0 })
    },
    removeRow(index) {
      this.rows.splice(index, 1)
    }
  }
}
</script>

使用第三方表格组件

对于企业级应用，可以考虑使用现成的表格组件库：

Element UI 的 el-table：

<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
<el-button @click="addRow">添加行</el-button>

Ant Design Vue 的 a-table：

<a-table :columns="columns" :dataSource="data">
<template slot="action" slot-scope="text, record, index">
 <a-button @click="removeRow(index)">删除</a-button>
</template>
</a-table>
<a-button @click="addRow">添加行</a-button>