The implementation method of adding function and modifying editing function on the same page in Vue - adding identifier (taking adding address and editing address as an example)
need:
Add and edit share the same form. When it is necessary to add, save is a function to enter the add function. When the user clicks on an address in the address list and wants to re-edit, click Edit on the address list, and the added form renders the data to be edited. After modification, save it again. At this time, save the function that enters the editing function for saving.
Effect:
1. When adding an address, click Save and the address will be added to the list.
Li Si added to the list:
2. When modifying Zhang San, click the edit of the address list, the data will be rendered to the form, and then edited again and saved into the list.
Click Edit to change Zhang San's name to Zhang Sanfeng.
Click Save:
step:
1. Add an attribute addr_id:null to the form object. It is used to determine whether clicking save is adding or editing. By default, null is added, and if it is not null, it will be edited.
In the event function of the save button, it is judged whether the addr_id is null, and it does what the adding function should do. It's not just doing what an editor should do.
2. Add things to do:
- Deep copy form obj, push into array
- clear form
- save to cache
3. What the editor should do:
- Click Edit to pass the index parameter into the edit_address(index) function.
- Find the list object through the parameter index, and deep copy to get copyobj. Change addr_id to index, and deeply copy this copyobj to the form object add_address again. display on the form
- After modifying the form, click Save, because the addr_id has changed, so enter the else condition of the save function, which is the editing function.
- The editing function is the same as adding except that addr_id needs to be changed back to null.
4. Delete function
The delete function is solved with arr.splice. The function passes in index
this.arrlist.splice(index,1)
Five, cache
- Because there is no page refresh, the address that has been entered needs to be included in the cache.
- Add, modify, delete, and every change of address must be included in the cache.
- In created, when you first enter the page, check whether there is an addresslist cached. If so, the addresslist assigned to data is displayed on the page.
code:
<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>