技巧6 vue/js地址列表中默认地址的做法|如何将指定索引项设为默认

最新推荐文章于 2026-03-22 10:00:06 发布

原创最新推荐文章于 2026-03-22 10:00:06 发布 · 2.2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue3项目技巧

本文介绍在Vue.js应用中处理地址列表的默认地址功能。需求包括：确保设置默认地址后，之前默认地址不再显示；默认地址始终位于列表首位。实现步骤包括：更新地址对象以包含`isDefault`标识；通过点击事件触发`setDefault`函数，根据索引设置`isDefault`值，并将默认地址移动到列表首位。

需求：

在地址列表中，通常会设置一个默认地址。

1.我们要保证设置地址1为默认地址后，再设置地址2为默认地址，地址1的默认要去掉。

2.默认地址要处于列表首位。

效果图：布局是element-plus

步骤：

add_address是每个地址对象，address_list是地址列表。

1.首先默认地址和设为默认不能在一个地址里同时出现，所以用v-if和v-else控制只显示一个。

<el-button>
    <em class="Default" v-if="item.isDefault">默认地址</em>
	<em  v-else @click="setDefault(index)">设为默认</em>	
</el-button>

2.要给默认地址一个标识符在地址对象里，在data的add_address里添加isDefault，初始值为空。并把它绑定在默认地址按钮。因为是值是空，所以不显示，显示v-else

3.点击设为默认，触发设置默认地址的函数 setDefault（index）,给这个函数传索引参数。

4.setDefault函数内部遍历地址数组，找到该索引下的地址对象，把它的isDefault设置为索引值。

遍历结束后，把设为默认地址的对象移到列表首位，方法就是先删除此对象，再在首位添加。

this.address_list.splice(0, 0,...this.address_list.splice(index, 1));//...展开运算符

全部代码：

<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></el-descriptions-item> -->
			 <!-- 不重要的姓名电话收货地址信息会被略掉~~ -- -->
                
			  <el-descriptions-item>
					<el-button type="primary" @click="edit_address(index)">编辑</el-button>
					<el-button @click="del(index)">删除</el-button>
                   <!--1.原理：v-if控制只显示一个-->
					<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>

<script>
    
    data(){
      return{
        address_list:[],
        add_address:{
		  title:'添加地址',
          name:'',
          tel:'',
          address:'',
            
		  isDefault:"", //2.此地址是否默认  
         
        },
			
      }
    },
    methods:{
        //3.设置默认地址函数
	   setDefault(index){
	   	for (var i = 0; i < this.address_list.length; i++) {
	   		this.address_list[i].isDefault=i==index;//i==index 表示i是否等于index,等于执行语句，不等不执行
	   	}
	   	
	   	this.address_list.splice(0, 0,...this.address_list.splice(index, 1));//默认地址设在首位  
	   },
           
           
           
    }
   
</script>
<style scoped>
   .Default{
	   color:orange
   }
</style>