技巧7 vue中添加功能和修改编辑功能在同一页面的实现方法-添加标识符（以添加地址和编辑地址为例

vue中添加功能和修改编辑功能在同一页面的实现方法-添加标识符（以添加地址和编辑地址为例）

需求：

添加和编辑共用同一个表单，当需要添加时，保存就是进添加功能的函数，当用户点击地址列表的某一个地址想要重新编辑时，点击地址列表的编辑，添加表单渲染要编辑的数据。修改后，重新保存，此时，保存进入编辑功能的函数进行保存。

效果：

1.当添加地址时,点击保存，地址添加进列表。

李四添加进列表：

2.修改张三时，点击地址列表的编辑，数据渲染到表单，重新更改再保存进列表。

点击编辑，将张三的姓名改为张三峰。

点击保存：

步骤：

一、给表单对象里添加一个属性addr_id:null。用于判断点击保存是添加还是编辑。null默认是添加，不是null了就进编辑。

保存按钮的事件函数里面判断这个addr_id是不是null,是就做添加功能该做的事情。不是就做编辑该做的事情。

二、添加该做的事情：

1. 深度复制表单obj,push进数组
2. 清空表单
3. 保存到缓存

三、编辑该做的事情：

1. 点击编辑传index参数进入 edit_address(index)函数。
2. 通过参数index找到列表这个对象，深度复制得到copyobj。将addr_id改为index,将这个copyobj再次深度复制给表单对象add_address。展示到表单上
3. 表单上修改完毕点击保存，因为addr_id改变了，所以进保存函数的else情况，也就是编辑功能。
4. 编辑功能除了要把addr_id改回null,其余与添加一致。

四、删除功能

删除功能用arr.splice解决。函数传入index

this.arrlist.splice(index,1)

五、缓存

1. 因为页面刷新就没有了，所以需要将已输入的地址计入缓存。
2. 添加，修改，删除，每一次改变地址都要计入缓存。
3. 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