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 })
即可实现动态添加,不过刷新页面数据会恢复如初