当前位置: 首页 > news >正文

解决el-radio-group只触发一次的问题

1.需求是点击合并后,出来二次确认框。现在的问题是点击完出现二次确认框后,再次点击不出来二次确认框了

2.一开始代码是这样写的

<el-radio-group v-model="unfold" size="mini" @change='changeMerge'><el-radio-button :label='1' border size="mini" class="unfold">展开</el-radio-button><el-popover placement="bottom" width="430" v-model="mergeFlag"             trigger="manual"><el-checkbox-group v-model="checkList" class="mt10" @change="handleCheckedChange"><el-checkbox label="下达人"></el-checkbox><el-checkbox label="下达日期"></el-checkbox><el-checkbox label="下达时间"></el-checkbox><el-checkbox label="评语内容"></el-checkbox></el-checkbox-group><div style="text-align: center;" class="mt20"><el-button size="mini" type="primary" @click="sureMerge">确认</el-button><el-button size="mini" @click="cancleMerge">取消</el-button></div><el-radio-button :label='2' border  size="mini" class="merge" slot="reference">合并</el-radio-button></el-popover></el-radio-group>mergeFlag:falsechangeMerge(val) {this.mergeVal = val;if (val === 2) {this.mergeFlag = true;} else {this.mergeFlag = false;}},cancleMerge() {this.mergeFlag = false},sureMerge(){this.mergeFlag = false 再写相关逻辑}

3.解决思路

  既然点了后再次点击不触发  那就重写事件 取消原来默认事件

  把原来绑在el-radio-group的事件取消掉  再el-radio-button俩个上面都绑定@click.native.prevent="changeMerge(1)"一个传1 一个传2 这样就触发了

原来想的是用el-button来写,试过el-button点多少次都会触发二次确认框  但是你更改其样式为el-radio-button的样式 工程量比较大 所以没深研究

相关文章:

  • 【信号与系统】(1)连续和离散表示
  • 算法训练营Day37(贪心6)
  • css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效
  • RabbitMQ入门篇【图文并茂,超级详细】
  • 【办公类-19-02-01】20240119统计班级幼儿姓名的长度、汉字重复、拼音重复(有无声调)Python
  • STM32(--001) Win10、Win11 上的驱动安装说明
  • AEB滤镜再破碎,安全焦虑「解不开」?
  • 大数据小白初探HDFS从零到入门(一)
  • 上海智慧岛大数据云计算中心项目正式封顶!
  • 汽车生产污废水处理需要哪些工艺设备
  • mac查看maven版本报错:The JAVA_HOME environment variable is not defined correctly
  • 大疆Mid360雷达使用教程总结
  • 三子棋/井字棋(C语言)
  • 美国积极利用EPMM漏洞;TensorFlow易受投毒攻击;伊朗黑客伪装刺探;GitHub在暴露高危漏洞| 安全周报 0119
  • PHP+MySQL组合开发:微信小程序万能建站源码系统 附带完整的搭建教程
  • angular2 简述
  • CSS 专业技巧
  • go append函数以及写入
  • Java深入 - 深入理解Java集合
  • JDK 6和JDK 7中的substring()方法
  • JDK9: 集成 Jshell 和 Maven 项目.
  • Material Design
  • Otto开发初探——微服务依赖管理新利器
  • Ruby 2.x 源代码分析:扩展 概述
  • SpiderData 2019年2月13日 DApp数据排行榜
  • STAR法则
  • TypeScript实现数据结构(一)栈,队列,链表
  • 从setTimeout-setInterval看JS线程
  • 订阅Forge Viewer所有的事件
  • 干货 | 以太坊Mist负责人教你建立无服务器应用
  • 后端_MYSQL
  • 浅谈Golang中select的用法
  • 十年未变!安全,谁之责?(下)
  • 由插件封装引出的一丢丢思考
  • [Shell 脚本] 备份网站文件至OSS服务(纯shell脚本无sdk) ...
  • AI又要和人类“对打”,Deepmind宣布《星战Ⅱ》即将开始 ...
  • 教程:使用iPhone相机和openCV来完成3D重建(第一部分) ...
  • !! 2.对十份论文和报告中的关于OpenCV和Android NDK开发的总结
  • (+4)2.2UML建模图
  • (C语言)二分查找 超详细
  • (笔记)Kotlin——Android封装ViewBinding之二 优化
  • (笔试题)合法字符串
  • (十七)devops持续集成开发——使用jenkins流水线pipeline方式发布一个微服务项目
  • (转)linux下的时间函数使用
  • (转)setTimeout 和 setInterval 的区别
  • .net core 微服务_.NET Core 3.0中用 Code-First 方式创建 gRPC 服务与客户端
  • .net mvc actionresult 返回字符串_.NET架构师知识普及
  • .NET NPOI导出Excel详解
  • .NET Project Open Day(2011.11.13)
  • .net refrector
  • .net 托管代码与非托管代码
  • @property括号内属性讲解
  • @staticmethod和@classmethod的作用与区别
  • [ Linux Audio 篇 ] 音频开发入门基础知识
  • [ Linux 长征路第五篇 ] make/Makefile Linux项目自动化创建工具