vue动态添加数据

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

即可实现动态添加，不过刷新页面数据会恢复如初