vue中添加功能和修改编辑功能在同一页面的实现方法-添加标识符(以添加地址和编辑地址为例)
需求:
添加和编辑共用同一个表单,当需要添加时,保存就是进添加功能的函数,当用户点击地址列表的某一个地址想要重新编辑时,点击地址列表的编辑,添加表单渲染要编辑的数据。修改后,重新保存,此时,保存进入编辑功能的函数进行保存。
效果:
1.当添加地址时,点击保存,地址添加进列表。
李四添加进列表:
2.修改张三时,点击地址列表的编辑,数据渲染到表单,重新更改再保存进列表。
点击编辑,将张三的姓名改为张三峰。
点击保存:
步骤:
一、给表单对象里添加一个属性addr_id:null。用于判断点击保存是添加还是编辑。null默认是添加,不是null了就进编辑。
保存按钮的事件函数里面判断这个addr_id是不是null,是就做添加功能该做的事情。不是就做编辑该做的事情。
二、添加该做的事情:
- 深度复制表单obj,push进数组
- 清空表单
- 保存到缓存
三、编辑该做的事情:
- 点击编辑传index参数进入 edit_address(index)函数。
- 通过参数index找到列表这个对象,深度复制得到copyobj。将addr_id改为index,将这个copyobj再次深度复制给表单对象add_address。展示到表单上
- 表单上修改完毕点击保存,因为addr_id改变了,所以进保存函数的else情况,也就是编辑功能。
- 编辑功能除了要把addr_id改回null,其余与添加一致。
四、删除功能
删除功能用arr.splice解决。函数传入index
this.arrlist.splice(index,1)
五、缓存
- 因为页面刷新就没有了,所以需要将已输入的地址计入缓存。
- 添加,修改,删除,每一次改变地址都要计入缓存。
- created里面,当刚进页面时,查看有没有缓存addresslist,如果有,赋给data的addresslist展示到页面上。
代码:
<template>
<div>
<!-- 添加地址表单 -->
<el-form ref="add_address" :model="add_address" label-width="120px">
<h5>{
{add_address.title}}</h5>
<el-form-item label="姓名" prop="name">
<el-input v-model="add_address.name" ></el-input>
</el-form-item>
<el-form-item label="电话" prop="tel">
<el-input v-model="add_address.tel" ></el-input>
</el-form-item>
<el-form-item label="省市区" prop="selectedOptions">
<el-cascader :options='options' v-model