element-ui中el-table点击其他自定义按钮展开table中某一行

news/2024/11/8 18:04:34/

element-ui中el-table点击其他自定义按钮展开table中某一行

在日常开发中,我们遇见了会有点击某些按钮,使得表格行展开的需求,这时候去查看文档
element-ui(table)
在这里插入图片描述
这里官方提供了示例为在行最左侧有一个展开合并icon,但是点其他地方不能展开,我们又想点其他地方而展开
在这里插入图片描述
我们看见是在table-column上定了type为expand,而该列里面的自定义模板便是展开后显示的内容
我们想要实现点击自定义功能,继续查阅文档:
在这里插入图片描述
这里的expand-row-keys文档解释说可以设置当前已展开的行,那么我们可以给table绑定这个属性,在点击方法里面进行绑定的值,而进行控制展开与否:
在这里插入图片描述
给想要点击的div上绑定click方法,并控制expands数组
在这里插入图片描述
此外,也需要给table绑定上row-key,因为这里会用row-key来对哪行展开进行控制

在这里插入图片描述
可以进行控制了后,我们发现前面的icon太丑了,不符合ui草图
在这里插入图片描述
我们粗暴点,先把icon隐藏掉
在这里插入图片描述
然后给这一列宽设置为1(设置为0我试过,在不同分辨率的屏幕会不一样)

在这里插入图片描述

然后这样就能完美实现了
在这里插入图片描述


http://www.ppmy.cn/news/25707.html

相关文章

深入理解MySQLⅢ -- 锁与InnoDB引擎

文章目录锁概述全局锁表级锁表锁元数据锁意向锁行级锁行锁间隙锁&临键锁InnoDB引擎逻辑存储结构架构内存结构磁盘结构后台线程事务原理redo logundo logMVCC锁 概述 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中,除传统的计算资源&#x…

MySQL 派生表产生关联索引auto_key0导致SQL非常的慢

相同的SQL在maridb运行0.5秒,在MySQL8.0.26中运行要19秒 官方MySQL在处理子查时,优化器有个优化参数derived_merge,MySQL7开启添加,默认on.很多情况可以自动优化派生表,避免创建临时索引auto_key0和生成临时表数据做…

图文详解Ansible中的变量及加密

文章目录一、变量命名二、变量级别三、.变量设定和使用方式1.在playbook中直接定义变量2.在文件中定义变量3.使用变量4.设定主机变量和清单变量5.目录设定变量6.用命令覆盖变量7.使用数组设定变量8.注册变量9.事实变量10.魔法变量四、JINJA2模板五、 Ansible的加密控制练习1.用…

PPS文件如何转换成PPT?附两种方法

在工作中,PPS文件的使用还是很广泛的,因为作为幻灯片放映文件,点击后就能直接播放,十分方便。但如果想要修改PPS里的内容,PPS是无法编辑的,我们需要把文件转换成PPT,再进行修改。 那PPS文件如何…

数据结构---时间复杂度

专栏:数据结构 个人主页:HaiFan. 专栏简介:开学数据结构,接下来会慢慢坑新数据结构的内容!!!! 时间复杂度前言1.算法效率1.1如何衡量一个算法的好坏1.2算法的复杂度2.时间复杂度2.1大…

XCP实战系列介绍13-基于Vector_Davinci工具的XCP配置介绍(二)

本文框架 1.概述2. XcpCmdConfig配置2.1 XcpAsychMessage2.2 Calibration 配置2.3 DAQ及STIM配置2.4 XCP切面配置2.5 XCP标准配置3. XcpConfig3.1 XCP Event配置3.2 XCP-Pdu配置4. XcpGeneral1.概述 在上篇我们开始对XCP的配置部分进行介绍,计划分别对通讯部分配置、XCP模块本…

Python3,2分钟掌握Doscoart库,你也能成为艺术家。

2行代码绘制水彩画1、引言2、 代码实战2.1 模块介绍2.2 模块安装2.3 代码示例2.3.1 创建默认图片2.3.2 设置参数创建图片2.3.3 查看设置参数2.3.4 查看配置2.3.5 保存配置2.3.6 加载配置2.3.7 导出配置文件2.3.7 生成Python代码2.3.8 调用文档3、总结1、引言 小屌丝&#xff1…

【刷题笔记】--二分查找binarysearch

当给一个有序的数组,在其中查找某个数,可以考虑用二分查找。 题目1: 二分查找的思路: 设置left和right指针分别指向要查找的区间。mid指针指向这个区间的中间。比较mid指针所指的数与target。 如果mid所指的数小于target&…