element ui的el-radio踩坑

最新推荐文章于 2025-04-17 17:02:05 发布

weixin_33768481

最新推荐文章于 2025-04-17 17:02:05 发布

阅读量3.7k

点赞数 1

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/samsara-yx/p/11058369.html

版权

博客讲述了点击radio出现弹窗并调用接口初始化数据时，遇到接口调用两次的问题。最初在radio外的div加click事件导致此问题，解决方法一是将外层div点击事件去掉，改为radio的change事件；二是仍用外层div点击事件，但将调用接口写在弹框open事件中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html

1 <div class="listPeopleDetail">
2     <div class="item" v-for="(item, index) in freeEmpList" :key="index">
3         <div class="name" v-cloak>{{item.empName}}</div>
4         <div class="number" v-cloak>剩余单数：{{item.orderCount}}单</div>
5         <div class="radio" @click="openAddOrder">
6             <el-radio v-model="checkedPeople" :label="item.empId"></el-radio>
7         </div>
8     </div>
9 </div>

2.js

openAddOrder:function(){
     this.dialogVisible=true;
      this.getAreaInfoAddOrderListMon()
 },
 
getAreaInfoAddOrderListMon:function(){
      this.$http.get("/esmart/getAreaInfoAddOrderListMon",{
         empId:vm.checkedPeople,
         radius:vm.radius,
         operDate:vm.operDate
         }).then(function(res){
             if (res.body.code == 0 && res.body.data !== null) {
                   console.log(res)
                   vm.addOrderList=res.body.data;
          }).catch(function(err){
                console.log(err)
           })
},

本来先做的是，点击radio后出现弹窗，并且调用一个接口来初始化弹窗的数据，最初在radio外面的div加了一个click事件，发现接口会调用两次，控制台会打印两边，解决方法

1）把外层div的点击事件去掉，改为radio的change事件

2）还是用外层div的click事件，但是调用接口的时候写在弹框的open事件中即可

转载于:https://www.cnblogs.com/samsara-yx/p/11058369.html