vue动态添加数据
3,在新增按钮处点击添加往数组里面push相对应的值。1,先声明一个数组为响应式的,里面有一些数据。即可实现动态添加,不过刷新页面数据会恢复如初。我这里用的是表格的,是要动态添加表格。给表单绑定v-model。2,获取到需要新增的值。
·
1,先声明一个数组为响应式的,里面有一些数据
const tableData = ref([
{
sex: '女',
name: '姓名1',
birthday:'0512'
},
{
sex: '女',
name: '姓名2',
birthday:'0314'
},
{
sex: '男',
name: '姓名3',
birthday:'1012'
},
{
sex: '女',
name: '姓名4',
birthday:'0915'
},
]);
我这里用的是表格的,是要动态添加表格
2,获取到需要新增的值
给表单绑定v-model
<el-form :model="form" label-width="120px">
<el-form-item label="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="date">
<el-input v-model="form.date" />
</el-form-item>
<el-form-item label="num">
<el-input v-model="form.num" />
</el-form-item>
3,在新增按钮处点击添加往数组里面push相对应的值
tableData.value.push({
name:form.name,
date:form.date,
add:form.num
})
即可实现动态添加,不过刷新页面数据会恢复如初
更多推荐
已为社区贡献1条内容
所有评论(0)