vue实现表格输入
实现表格输入的基本思路
在Vue中实现表格输入功能，通常需要结合表单控件和表格布局。核心是通过v-model绑定数据，动态渲染可编辑的表格单元格。使用数组存储表格数据，通过v-for循环渲染行和列。
基础实现代码示例
<template>
<table>
<thead>
<tr>
<th v-for="(header, index) in headers" :key="index">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
<td v-for="(cell, cellIndex) in row" :key="cellIndex">
<input v-model="tableData[rowIndex][cellIndex]" />
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
headers: ['姓名', '年龄', '职业'],
tableData: [
['', '', ''],
['', '', ''],
['', '', '']
]
}
}
}
</script>动态添加行功能
methods: {
addRow() {
this.tableData.push(Array(this.headers.length).fill(''))
},
removeRow(index) {
this.tableData.splice(index, 1)
}
}使用组件化实现
可以将表格行封装为单独组件，提高代码复用性：
<template>
<tr>
<td v-for="(cell, index) in rowData" :key="index">
<input v-model="rowData[index]" @blur="onCellChange" />
</td>
<td><button @click="$emit('remove')">删除</button></td>
</tr>
</template>
<script>
export default {
props: ['rowData'],
methods: {
onCellChange() {
this.$emit('change', this.rowData)
}
}
}
</script>表单验证处理
添加简单的表单验证逻辑：
data() {
return {
errors: []
}
},
methods: {
validate() {
this.errors = []
this.tableData.forEach((row, rowIndex) => {
row.forEach((cell, cellIndex) => {
if (!cell) {
this.errors.push(`第${rowIndex+1}行第${cellIndex+1}列不能为空`)
}
})
})
return this.errors.length === 0
}
}性能优化建议
对于大型表格，考虑使用虚拟滚动技术避免渲染过多DOM节点。可以引入第三方库如vue-virtual-scroller：
import { RecycleScroller } from 'vue-virtual-scroller'完整功能示例
<template>
<div>
<button @click="addRow">添加行</button>
<table>
<thead>...</thead>
<tbody>
<table-row
v-for="(row, index) in tableData"
:key="index"
:row-data="row"
@change="updateRow(index, $event)"
@remove="removeRow(index)"
/>
</tbody>
</table>
<div v-if="errors.length">
<p v-for="(error, index) in errors" :key="index">{{ error }}</p>
</div>
<button @click="submit">提交</button>
</div>
</template>以上实现方式提供了基本的表格输入功能，可以根据实际需求扩展更多特性如单元格类型验证、复杂表头、合并单元格等功能。
