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

table表格中使用el-popover 无效问题解决

实例只针对单个的按钮管用在表格里每一列都有el-popover相当于是v-for遍历了 所以我们在触发按钮的时候并不是单个的触发某一个 

主要执行 代码

  <el-popover placement="left" :ref="`popover-${scope.$index}`">   动态绑定了ref

关闭弹窗  执行deltaskList

  <el-table-column align="center" label="操作" fixed="right" width="300px"><!-- v-buttonShow="5010403" --><template slot-scope="scope"><el-popover placement="left" :ref="`popover-${scope.$index}`"><div style="border-bottom: 1px solid #ebeef5; margin-bottom: 10px; padding-bottom: 6px">设置账期</div><div style="display: flex; flex-direction: column">仅记录账期,并不会影响出账流程~<el-selectv-model="setAccountVal"clearablefilterableplaceholder="请选择结算方式"style="width: 260px; margin-top: 15px"size="small"><el-optionv-for="(item, index) in paymentTermsList":key="index":label="item.name":value="item.value"></el-option></el-select></div><div style="text-align: right; margin: 0px; margin-top: 15px"><el-button type="text" @click="deltaskList(scope.$index)">取消 </el-button><el-button size="small" type="primary" @click="popConfirmSub(scope.$index)">确定 </el-button></div><el-buttonstyle="margin-left: 10px"slot="reference"type="text"v-if="mode == '0'"@click="setAccountBtn(scope.row)">设置账期</el-button></el-popover></template></el-table-column>// 设置账期setAccountBtn (row, index) {let findItem = this.paymentTermsList.find((item) => item.name === row.paymentTerms)this.setAccountVal = findItem.valuethis.setAccountBtnRow = row},// 确定async popConfirmSub (index) {if (this.setAccountVal === '') return this.$message.error('请选择账期')await newFranchiseeCustomerPaymentTermsEdit({orgOwner: this.setAccountBtnRow.orgOwner,paymentTerms: this.setAccountVal})this.$message.success('操作成功')this.deltaskList(index)this.querySubmit(1)},// 取消deltaskList (index) {this.$refs[`popover-${index}`].doClose()}

相关文章:

  • 连接progressql报错Cannot load JDBC driver class ‘org.postgresql.Driver‘,亲测有效!!!
  • 尝试读取挪威 3d radar数据
  • 年度总结 | 回味2023不平凡的一年
  • 一款超酷的一体化网站测试工具:Web-Check
  • Ubuntu Linux 入门指南:面向初学者
  • 父组件向子组件传递数据
  • 浅谈数据仓库运营
  • LeetCode 2706. 购买两块巧克力【数组,一次遍历】1207
  • P8780 [蓝桥杯 2022 省 B] 刷题统计
  • Java多线程之线程池,volatile,悲观锁,乐观锁,并发工具类
  • 机器学习之BP神经网络精讲(Backpropagation Neural Network(附案例代码))
  • 基于SpringBoot的在线互动学习网站
  • git上传代码到github远程仓库
  • 个人博客主题 vuepress-hope
  • ubuntu 如何放开防火墙端口,ubuntu 防火墙操作命令,ubuntu 防火墙全面操作说明
  • 03Go 类型总结
  • ComponentOne 2017 V2版本正式发布
  • download使用浅析
  • echarts花样作死的坑
  • k个最大的数及变种小结
  • Markdown 语法简单说明
  • MaxCompute访问TableStore(OTS) 数据
  • Mysql5.6主从复制
  • Spring Boot MyBatis配置多种数据库
  • spring学习第二天
  • 笨办法学C 练习34:动态数组
  • 对超线程几个不同角度的解释
  • 批量截取pdf文件
  • 如何在GitHub上创建个人博客
  • 说说动画卡顿的解决方案
  • 正则学习笔记
  • 小白应该如何快速入门阿里云服务器,新手使用ECS的方法 ...
  • (007)XHTML文档之标题——h1~h6
  • (14)学习笔记:动手深度学习(Pytorch神经网络基础)
  • (HAL库版)freeRTOS移植STMF103
  • (js)循环条件满足时终止循环
  • (搬运以学习)flask 上下文的实现
  • (考研湖科大教书匠计算机网络)第一章概述-第五节1:计算机网络体系结构之分层思想和举例
  • ***linux下安装xampp,XAMPP目录结构(阿里云安装xampp)
  • .axf 转化 .bin文件 的方法
  • .L0CK3D来袭:如何保护您的数据免受致命攻击
  • .NET 线程 Thread 进程 Process、线程池 pool、Invoke、begininvoke、异步回调
  • .NET:自动将请求参数绑定到ASPX、ASHX和MVC(菜鸟必看)
  • .NET建议使用的大小写命名原则
  • .NET开源项目介绍及资源推荐:数据持久层 (微软MVP写作)
  • .net流程开发平台的一些难点(1)
  • .NET企业级应用架构设计系列之应用服务器
  • .one4-V-XXXXXXXX勒索病毒数据怎么处理|数据解密恢复
  • @DependsOn:解析 Spring 中的依赖关系之艺术
  • [ C++ ] STL_list 使用及其模拟实现
  • [].slice.call()将类数组转化为真正的数组
  • [CTF]2022美团CTF WEB WP
  • [CVPR2021]Birds of a Feather: Capturing Avian Shape Models from Images
  • [Django 0-1] Core.Checks 模块
  • [docker]docker网络-直接路由模式