技巧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='add_address.selectedOptions' @change='addressChange'></el-cascader>
			</el-form-item>
		    <el-form-item label="详细地址" prop="detailaddress">
		      <el-input v-model="add_address.detailaddress" ></el-input>
		    </el-form-item>
			<el-form-item>
			    <el-button type="primary" @click="onSubmit">保存</el-button>
			    <el-button @click="clear('add_address')">取消</el-button>
			</el-form-item>
		</el-form>
		
		<!-- 下面是地址列表： -->
		<h5>地址列表</h5>
		<div v-for="(item,index) in address_list" :key='index' class="addresslist">
			<el-descriptions
			  :column="4"
			  :size="size"
			  direction="vertical"
			  :style="blockMargin"
			>
			  <el-descriptions-item label="姓名">{{item.name}}</el-descriptions-item>
			  <el-descriptions-item label="电话">{{item.tel}}</el-descriptions-item>
			  <el-descriptions-item :span="2">
					{{item.default1}}
			  </el-descriptions-item>
			  <el-descriptions-item label="收货地址">
					{{item.addressText}}{{item.detailaddress}}
			  </el-descriptions-item>
			  <el-descriptions-item>
					<el-button type="primary" @click="edit_address(index)">编辑</el-button>
					<el-button @click="del(index)">删除</el-button>
					<el-button>
						<em class="Default" v-if="item.isDefault">默认地址</em>
						<em  v-else @click="setDefault(index)">设为默认</em>	
					</el-button>
					
			  </el-descriptions-item>		
			</el-descriptions>
		</div>
		  
</div>
</template>
<script>
import { reactive } from 'vue'
import { regionData, CodeToText } from 'element-china-area-data'	
export default{
	name:"addresslist",
    data(){
      return{
        address_list:[],
        add_address:{
		  title:'添加地址',
          name:'',
          tel:'',
		  selectedOptions:['110000', '110100', '110101'], 
		  addressText:'北京市市辖区东城区', 
          detailaddress:'',
		  isDefault:"", 
          addr_id:null//1.作为点击保存时，是添加还是编辑的标识  null添加  非null编辑
        },
		options: regionData,
		
			
      }
    },
	created(){
	  //进页面先查看缓存有没有address_list
	  if(window.localStorage.getItem("addresslist")){
	      //拉取到data
		  console.log(window.localStorage.getItem("addresslist"))
		  this.address_list=JSON.parse(localStorage.getItem("addresslist"))
		
	  }
    },
    methods:{
		//清空表单函数
		clear(formname){
			this.$refs[formname].resetFields();
		},
		//添加新地址函数   
       onSubmit(){
           console.log("--------"+this.add_address.addr_id)
          //2.如果id值为空，就是添加，不为空就是编辑
          if(this.add_address.addr_id==null){
			var copy_add=JSON.parse(JSON.stringify(this.add_address))//复制obj 表单
            this.address_list.push(copy_add);//添加进列表
             // 添加完了初始化 /清空表单
			this.clear("add_address")
			//保存进缓存
			localStorage.setItem("addresslist",JSON.stringify(this.address_list))
			
			
          }else{
              //点击上面的保存按钮
              //进入编辑地址,把值赋回列表
             console.log("我是编辑"+this.add_address.addr_id)
			var copy_edit=JSON.parse(JSON.stringify(this.add_address))
			copy_edit.title='添加地址'
			copy_edit.addr_id=null
			this.address_list[this.add_address.addr_id]=JSON.parse(JSON.stringify(copy_edit))
              // 初始化
            this.clear("add_address")
			//保存进缓存
			localStorage.setItem("addresslist",JSON.stringify(this.address_list));
          }
       },
	   
       // 点击列表中每个地址的编辑时 
       edit_address(index){
		 // 让渲染的add_address=此时选中的地址(index)  
		var copy_obj=JSON.parse(JSON.stringify(this.address_list[index]))//复制列表里此地址obj
		copy_obj.title=	'编辑地址'
		copy_obj.addr_id=index
		this.add_address=JSON.parse(JSON.stringify(copy_obj))//注意obj也是深度复制给表单
       },
	   //删除本地址
       del(index){
         this.address_list.splice(index,1)
		 //保存进缓存
		 localStorage.setItem("addresslist",JSON.stringify(this.address_list));
       }
     }
  }
</script>

<style scoped>
   .Default{
	   color:orange
   }
   .addresslist{
	   border-top:1px solid darkgray;
   }
   h5{
	   text-align: left;
	   font-weight: bold;
   }
	   
    
</style>