vue项目中我的收货地址功能做法（添加地址、编辑地址、删除地址、默认地址、省市区三级联动）

我的地址效果图：

---

vue3引用element-plus时清空表单的操作

vue3引用element-plus时清空表单的操作

vue3地址列表中默认地址的做法

vue3地址列表中默认地址的做法

vue中element-china-area-data依赖和element-plus级联选择器构建省市区三级联动

vue中element-china-area-data依赖和element-plus级联选择器构建省市区三级联动

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

vue中添加功能和修改编辑功能在同一页面的实现方法

全部代码

<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: "请选择", //选择区域
		  selectedOptions:['110000', '110100', '110101'],  //或者这里给一个默认省市区
		  addressText:'北京市市辖区东城区',   //省市区，另设addressText显示。
          detailaddress:'',
		  isDefault:"", //此地址是否默认  
          addr_id:null//作为点击保存时，是添加还是编辑的标识  null添加  非null编辑
        },
		options: regionData,
		
			
      }
    },
   
    created(){
      //如果没有user，去登陆
      if(!window.localStorage.getItem("user")){
          this.$router.push({path:'/gologin'})
      }
	  //进页面先查看缓存有没有address_list
	  if(window.localStorage.getItem("addresslist")){
	      //拉取到data
		  console.log(window.localStorage.getItem("addresslist"))
		  this.address_list=JSON.parse(localStorage.getItem("addresslist"))
		
	  }
    },
    methods:{
		//省市区函数
		addressChange (arr) {
			// 此句为el-cascader的值 
			var addressText=CodeToText[arr[0]]+CodeToText[arr[1]]+CodeToText[arr[2]]
			console.log(addressText)
			this.add_address.addressText=addressText
			
		   },
		//清空表单
		clear(formname){
			this.$refs[formname].resetFields(); //此时传值应是字符串  this.clear("add_address")
		},
		
		
		// 添加新地址   
       onSubmit(){
           console.log("--------"+this.add_address.addr_id)
          //如果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))
			console.log("------------edit--")
			console.log(this.address_list[this.add_address.addr_id])
              // 初始化
            this.clear("add_address")
			//保存进缓存
			localStorage.setItem("addresslist",JSON.stringify(this.address_list));
          }
       },
	   
	   //设置默认地址
	   setDefault(index){
	   	for (var i = 0; i < this.address_list.length; i++) {
	   		this.address_list[i].isDefault=i==index;
	   	}
	   	
	   	this.address_list.splice(0, 0,...this.address_list.splice(index, 1));//默认地址设在首位  ...展开运算符
		//保存进缓存
		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))
		console.log(this.add_address)
        console.log('下方编辑按钮'+this.add_address.addr_id)
       },
	   
       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>