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

我的地址效果图：

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

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

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_listif(window.localStorage.getItem("addresslist")){//拉取到dataconsole.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=nullthis.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]))//复制列表里此地址objcopy_obj.title=    '编辑地址'copy_obj.addr_id=indexthis.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>

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

问题：在vue项目中如何使用element-ui的照片墙功能？
遇到的问题: 在vue项目中如何使用element-ui的照片墙功能,限制只上传9张照片fileList?尤其是在编辑的情况下. 解决方法: <el-uploadaction="htt ...
vue项目中使用高德地图行政区域聚合功能（script引入方式）
步骤一 :引入高德js资源 <script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.15& ...
vue项目中图标可拖拽功能实现
vue项目中页面实现图标拖拽功能最近在做项目需求时有个小功能:在页面的首页增加一个快速功能按钮,用来满足操作者快速实现某一目的渴望.为了体现代码搬运工的气质与水准,当时心想,这么简单的一个小东西必须 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
【全栈项目上线（vue+node+mongodb）】06.nodejs服务上线（生产环境前后分离的vue项目中怎么解决跨域问题）...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...
vue与php接口对接,怎样使用vue项目中api接口
这次给大家带来怎样使用vue项目中api接口,使用vue项目中api接口的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 在axiosconfig目录下的axiosConfig.jsimpor ...
Vue学习笔记（二）—— vue项目中使用axios
一.文档链接 axios文档 vue开发插件二.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XML ...
Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...

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

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

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

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

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

全部代码

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

最新文章

热门文章