elementui 弹窗 显示详细信息_ElementUI中el-table双击单元格事件并获取指定列的值和弹窗显示详细信息...
场景
双击el-table的某个单元格时获取此单元格的信息并弹窗显示其他关联的信息。
效果如下
注:
实现
首先给el-table设置cell-dblclick事件
v-loading="loading":data="kqryszList"@selection-change="handleSelectionChange"@cell-dblclick="bccelldblclick"
ref="tb"
>
在事件对应的方法中接收四个参数
//班次单元格双击
bccelldblclick(row, column, cell, event) {//双击的是班次单元格
if (column.property == "bc") {this.bcxxopen = true;
}
}//双击的是班次组单元格
if (column.property == "bcz") {this.bczxxopen = true;
}
}
},
这里用到了行对象和列对象以及单元格对应。
上面设置的单元格双击事件是对所有的单元格双击都生效。
如果只是想对某一列的单元格双击进行生效的话,可以通过
if (column.property == "bc")
来进行判断,其中bc是在el-table中
label="班次"align="center"prop="bc":formatter="bcFormatter"width="400"
/>
来设置的,这样就能限制只有在当前列是对应的bc属性的列时才执行下面的操作。
那么怎样获取当前双击的单元格的值。
通过传递的参数的row行对应对应的属性bc就可以定位到当前双击的单元格的值。
var bc = row.bc;
然后上面是进行的弹窗显示,首先在页面中定义一个dialog
公众号:霸道的程序猿
设置它是否隐藏是通过
:visible.sync="bcxxopen"
来实现,其中bcxxopen是一个boolean变量。
需要声明这个变量
data() {return{
bcxxopen:false,
默认是false即隐藏,那么在上面双击单元格时将此变量设置为true就能显示出来了。
如果是需要根据拿到的当前单元格的值来进行关联查询相关信息。
bccelldblclick(row, column, cell, event) {
console.log(column);//双击的是班次单元格
if (column.property == "bc") {//根据班次编号循环获取班次详细信息
var bc =row.bc;if (bc != null) {var bcarray = bc.split(",");
getBcInfoByBhs(bcarray).then((response)=>{this.bcxingxidata =response.data;
});this.bcxxopen = true;
}
}
},
首先获取到当前单元格的值,然后调用请求后台数据的方法,将请求的数据赋值给
this.bcxingxidata
首先需要提前声明这个数组
data() {return{
bcxingxidata: [],
然后在打开的弹窗的dialog中进行指定布局的显示数据
班次名称:{{item.bcmc}}
- 打卡时间段{{k+1}}:{{data.dkkssj}}--{{data.dkjssj}}
elementui 弹窗 显示详细信息_ElementUI中el-table双击单元格事件并获取指定列的值和弹窗显示详细信息...相关推荐
- ElementUI中el-table双击单元格事件并获取指定列的值和弹窗显示详细信息
场景 双击el-table的某个单元格时获取此单元格的信息并弹窗显示其他关联的信息. 效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公 ...
- 解决wps工作簿从文本中复制粘贴时单元格中首位0无法显示
解决wps工作簿从文本中复制粘贴时单元格中首位0无法显示 1.选中特定单元格-开始-类型转换-数字转换为文本类型 2.选中要复制的文本 3.粘贴单元格-右键-选择粘贴-无格式文本 4.效果 1.选中特 ...
- java让内容不超出单元格_html表格中单元格内容超出不换行和超出宽度自动隐藏并显示省略号及鼠标移入显示全部内容/移出隐藏(用title属性)...
参考https://www.cnblogs.com/yy-hh/p/4523939.html 在表格布局中经常会遇到因为表格内容长短的变化导致错位布局混乱的情况,这个时候我们可能会有为了布局稳定把单元 ...
- C#中导出Excel的单元格属性设置
A.单元格格式设置,默认为常规类型:Excel Excel.Range r =mySheet.get_Range(mySheet.Cells[1,1],mySheet.Cells[DT.Rows.Co ...
- VBA实现为Excel中自定义名称的单元格添加批注
一.本地office中通过创建宏实现此需求 1.打开一个Excel文件,在需要插入批注的单元格右击-定义名称(myTable1).点击菜单栏-视图-宏-查看宏-输入宏名-创建宏 2.进入VBA编辑 ...
- html表格怎么纵向合并单元格,在html中表格如何合并单元格
在html中表格如何合并单元格 发布时间:2020-04-28 10:55:12 来源:亿速云 阅读:777 作者:小新 这篇文章主要为大家详细介绍了在html中表格如何合并单元格,文中示例代码介绍的 ...
- JAVA导出Excel通用工具类——第一篇:详细介绍POI 导出excel的多种复杂情况,包括动态设置筛选、动态合并横向(纵向)单元格等多种复杂情况——保姆级别,真的不能再详细了,代码拿来即用)
JAVA导出Excel通用工具--第一篇:详细介绍POI 导出excel的多种复杂情况,包括动态设置筛选.动态合并横向(纵向)单元格等多种复杂情况--保姆级别,真的不能再详细了,封装通用工具类,代码拿 ...
- wps交叉表_WPS表格中如何锁定单个单元格?,这几步你要了解
如同加密文件一样,WPS表格中可以对单个单元格进行锁定.起到保护里面数据的作用,其具体操作步骤如下: 工具/材料 WPS办公软件 操作方法 01 在桌面上双击WPS表格的快捷图标,打开WPS表格这款软 ...
- 如何在EXCEL中查找多个单元格中的多个关键字,多个单元格满足多个条件的行的绿色在线工具
Excel查找,偶尔有情况遇到要在Excel中查找多个单元格的多个关键字(或包含或相等),或多个单元格或列满足多个的条件的行,Excel本身的支撑没有那么灵活.本身我们又对代码不熟悉,有一个方便性的工 ...
最新文章
- 磁盘加密软件TrueCrypt知识大全(三)之加密非系统分区/设备
- opencv 计数后不动了 训练模型时_用OpenCV和深度学习进行年龄识别
- 《大话数据结构》第9章 排序 9.2 排序的基本概念与分类
- js 读取php文件内容为空,PHP 读取文件内容代码(txt,js等)
- caffe+opencv3.3.1
- 伴鱼DQC数据质量平台实践
- WPF e.Systemkey的一个坑
- 高效的java异常处理
- Qt + DbgView : 将qDebug输出到DbgView或终端
- HTTP方式文件分片断点下载
- css 更改鼠标为手状样式
- uniapp map上添加浮层无法显示问题?
- java——MP3转wav
- 在 SSM 中使用 Ajax 进行数据传递
- <爬虫> 豆瓣电影排行榜(含代码)
- 地磅系统连不上云端服务器,LiteCMS云称重管理系统
- SQLserver中的内连接和左连接
- go安装and新建go项目
- commander入门教程及高级用法
- k8s搭建 rabbitmq集群
热门文章
- cobaltstrike扩展_Malwarebytes:使用可变C2下发Cobalt Strike的APT攻击
- 计算机技术博客博客知乎,我的技术博客的选择:CSDN、博客园、简书、知乎专栏仍是Github Page?...
- php进程通讯方式,PHP进程模型、进程通讯方式、进程线程的区别分别有哪些?
- JDK源码解析之 Java.lang.Compiler
- Linux集群架构(LVS DR模式搭建、keepalived + LVS)
- Phoenix:全局索引设计实践
- 洛谷P1204 [USACO1.2]挤牛奶Milking Cows 前缀和
- Linux解析内核源代码——传输控制块诞生
- OpenscenGraph中控制swapbuffer的方法(用于多机大屏幕同步显示机制)
- 我的家庭私有云计划-2