vue实现添加行
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>
注意事项
- 为动态生成的元素添加唯一的 key 属性，帮助 Vue 高效更新 DOM
- 对于大型表格，考虑使用虚拟滚动技术优化性能
- 表单验证应该在添加行和提交数据时进行
- 复杂业务逻辑建议使用 Vuex 或 Pinia 管理状态
以上方法可以根据具体业务需求进行组合和调整，Vue 的数据响应式特性使得表格行的动态添加变得简单高效。
