vue实现表格数据录入

Vue 表格数据录入实现方法

基础表格数据绑定 使用 v-model 实现双向数据绑定是最简单的方式。在表格中为每个输入框绑定到数组的对应属性：

<table>
  <tr v-for="(item, index) in tableData" :key="index">
    <td><input v-model="item.name" type="text"></td>
    <td><input v-model="item.age" type="number"></td>
  </tr>
</table>

data() {
  return {
    tableData: [
      { name: '', age: null },
      { name: '', age: null }
    ]
  }
}

动态添加/删除行 通过数组方法实现行的增删操作：

methods: {
  addRow() {
    this.tableData.push({ name: '', age: null })
  },
  removeRow(index) {
    this.tableData.splice(index, 1)
  }
}

表单验证 使用计算属性或第三方库如 VeeValidate 进行验证：

computed: {
  isValid() {
    return this.tableData.every(item => 
      item.name && !isNaN(item.age)
    )
  }
}

数据提交处理 通过 AJAX 或 axios 提交数据：

methods: {
  submitData() {
    if(this.isValid) {
      axios.post('/api/save', this.tableData)
        .then(response => {
          console.log('保存成功')
        })
    }
  }
}

高级功能实现

使用组件化表格 创建可复用的表格组件：

<template>
  <table>
    <slot name="header"></slot>
    <tr v-for="(row, index) in rows" :key="index">
      <slot :row="row" :index="index"></slot>
    </tr>
  </table>
</template>

实时保存功能 添加防抖函数避免频繁请求：

import _ from 'lodash'
methods: {
  autoSave: _.debounce(function() {
    this.submitData()
  }, 1000)
}

Excel 导入导出 使用 xlsx 库实现：

import XLSX from 'xlsx'
methods: {
  exportExcel() {
    const ws = XLSX.utils.json_to_sheet(this.tableData)
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1")
    XLSX.writeFile(wb, "tableData.xlsx")
  }
}

性能优化建议

对于大型表格使用虚拟滚动：

<virtual-scroller :items="tableData" item-height="50">
  <template v-slot="{ item }">
    <tr>
      <td><input v-model="item.name"></td>
      <td><input v-model="item.age"></td>
    </tr>
  </template>
</virtual-scroller>

使用 Vuex 管理状态：

export default {
  computed: {
    tableData() {
      return this.$store.state.table.data
    }
  }
}