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
}
}
}
