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

最新推荐文章于 2024-09-25 09:08:13 发布

luanmabug

最新推荐文章于 2024-09-25 09:08:13 发布

阅读量8.1k

点赞数 4

分类专栏： # vue3案例文章标签： vue.js 前端地址功能做法

本文链接：https://blog.csdn.net/yangyangdt/article/details/122711532

版权

本文介绍了在Vue3项目中使用element-plus实现收货地址功能的详细步骤，包括如何清空表单、设置默认地址、构建省市区三级联动以及在同一页面上实现添加和编辑地址的功能。提供了关键代码示例。

摘要由CSDN通过智能技术生成

我的地址效果图：

在这里插入图片描述

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