当前位置：首页 > VUE

vue实现表格数据录入

2026-01-21 19:44:37VUE

Vue 实现表格数据录入的方法

基础表格数据绑定

使用 v-model 绑定表格输入框数据，配合 v-for 动态渲染表格行。适合静态数据结构或简单增删场景。

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index">
      <td><input v-model="item.name" placeholder="姓名"></td>
      <td><input v-model="item.age" type="number" placeholder="年龄"></td>
      <td><button @click="removeRow(index)">删除</button></td>
    </tr>
    <button @click="addRow">新增行</button>
  </table>
</template>

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

动态表单验证

结合 Element UI 或 Ant Design Vue 的表格组件实现带验证的数据录入。以下以 Element UI 为例：

<template>
  <el-table :data="tableData" border>
    <el-table-column prop="name" label="姓名">
      <template #default="{ row }">
        <el-input 
          v-model="row.name" 
          :rules="[{ required: true, message: '必填' }]"
        ></el-input>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ $index }">
        <el-button @click="deleteRow($index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="addNewRow">新增行</el-button>
</template>

复杂数据结构处理

对于嵌套对象或动态列的场景，可使用计算属性配合自定义组件：

export default {
  data() {
    return {
      columns: ['product', 'price', 'quantity'],
      items: [
        { product: '商品A', price: 10, quantity: 1 },
        { product: '商品B', price: 20, quantity: 2 }
      ]
    }
  },
  methods: {
    addItem() {
      this.items.push(
        this.columns.reduce((obj, col) => {
          obj[col] = col === 'quantity' ? 1 : ''
          return obj
        }, {})
      )
    }
  }
}

数据持久化方案

提交数据时进行深度校验并处理：

methods: {
  submitData() {
    const invalidItems = this.tableData.filter(
      item => !item.name || !item.age
    )
    if (invalidItems.length) {
      alert('请填写完整信息')
      return
    }
    axios.post('/api/save', this.tableData).then(() => {
      alert('保存成功')
    })
  }
}

性能优化建议

对于大型数据集采用虚拟滚动方案：

<template>
  <RecycleScroller
    class="table-container"
    :items="tableData"
    :item-size="50"
    key-field="id"
  >
    <template #default="{ item }">
      <tr class="table-row">
        <td><input v-model="item.name"></td>
        <td><input v-model.number="item.value"></td>
      </tr>
    </template>
  </RecycleScroller>
</template>

关键点总结：