el-table表格的展开行,初始化的时候展开哪一行+设置点击行可展开功能

效果:

表格展开行官网使用:

通过设置 type="expand" 和 Scoped slot 可以开启展开行功能,el-table-column 的模板会被渲染成为展开行的内容,展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。

但是这种方法是有局限性,只是点击箭头展开,点击行没反应,这里做优化点击行也可以进行展开。

关键点(以下属性和事件缺一不可):

:row-key="getRowKeys"

:expand-row-keys="expands"

@row-click="clickRowHandle"

需要默认展开行只需要在expands存入需要展开行的id就可以了

html

        <el-table :data="tableData":row-key="getRowKeys":expand-row-keys="expands"@row-click="clickRowHandle"border><el-table-column type="expand"><template slot-scope="scope"><div class="expand-txt"><span>编号:</span> {{ scope.row.code }}</div><div class="expand-txt"><span>批次:</span> {{  scope.row.batch }}</div><div class="expand-txt"><span>名称:</span> {{  scope.row.name }}</div><div class="expand-txt"><span>规格:</span> {{  scope.row.specifications }}</div><div class="expand-txt"><span>参数:</span> {{  scope.row.parameter }}</div></template></el-table-column><el-table-column prop="code"label="编号" width="120px"></el-table-column><el-table-column prop="batch"label="批次"></el-table-column><el-table-column prop="name"label="姓名"></el-table-column><el-table-column prop="specifications"label="规格"></el-table-column><el-table-column prop="parameter"label="参数"></el-table-column></el-table>

script:

<script>
export default {data () {return {tableData: [{id: 1,code: '2016-05-01',batch: 1,name: '王小虎',specifications: 'A',parameter: '上海市普陀区金沙江路 1518 弄'}, {id: 2,code: '2016-05-02',batch: 1,name: '王小虎',specifications: 'A',parameter: '上海市普陀区金沙江路 1517 弄'}, {id: 3,code: '2016-05-03',batch: 1,name: '王小虎',specifications: 'A',parameter: '上海市普陀区金沙江路 1519 弄'}, {id: 4,code: '2016-05-04',batch: 1,name: '王小虎',specifications: 'A',parameter: '上海市普陀区金沙江路 1516 弄'}],// 获取row的key值getRowKeys (row) {// console.log(row);return row.id;},expands: [],}},components: {},mounted () {// 在初始化的时候展开第一行都可以了this.expands.push(this.tableData[0].id);},methods: {clickRowHandle (row) { // , column, event// console.log(row, column, event);if (this.expands.includes(row.id)) {this.expands = this.expands.filter(val => val !== row.id)console.log(1, this.expands);} else {this.expands.push(row.id)console.log(2, this.expands);}}}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/54340.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL篇(存储引擎 - InnoDB存储引擎架构)(持续更新迭代)

目录 一、逻辑存储结构 1. 表空间 2. 段 3. 区 4. 页 5. 行 二、架构 1. 简介 2. 内存结构&#xff08;四部分&#xff09; Buffer Pool Change Buffer Adaptive Hash Index Log Buffer 3. 磁盘结构&#xff08;七部分&#xff09; System Tablespace File-Per-…

Unity 设计模式 之 结构型模式 -【装饰者模式】【外观模式】【享元模式】【代理模式】

Unity 设计模式 之 结构型模式 -【装饰者模式】【外观模式】【享元模式】【代理模式】 目录 Unity 设计模式 之 结构型模式 -【装饰者模式】【外观模式】【享元模式】【代理模式】 一、简单介绍 二、装饰者模式&#xff08;Decorator Pattern&#xff09; 1、什么时候使用装…

vagrant+virtualbox+ubuntu22.04无法上网问题

一、过程 vagrantfile配置私有网络 config.vm.network "private_network", ip: "192.168.56.10"启动虚拟机&#xff0c;可以ping通百度的实际IP&#xff0c;ping不通域名修改/etc/netplan/50-vagrant.yaml&#xff0c;配置DNS network:renderer: Networ…

Linux-mysql5.7-mysql8.0安装包下载及安装教程,二合一

一、安装包下载 1、手动下载 MySQL :: Download MySQL Community Server 2、wegt下载 wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.24-linux-glibc2.12-x86_64.tar.gz 登录自己的liunx &#xff0c;复制上面的命令下载。 二、手动安装 1、上传压缩包到…

BSN六周年:迈向下一代互联网

当前&#xff0c;分布式技术作为现代计算机科学和信息技术的重要组成部分&#xff0c;在云计算、区块链等技术的推动下&#xff0c;正以多样化的形式蓬勃发展。 ​而区块链作为一种特殊的分布式系统&#xff0c;近年来也在各个领域得到了广泛关注。通过在区块链上运行智能合约…

JSBSim中的运动方程模型(更新ing........

JSBSim中的运动方程模型 飞行动力学模型的核心目标是模拟并跟踪飞行器在地球&#xff08;或其他行星&#xff09;表面上方的飞行轨迹&#xff0c;这需要考虑作用于飞行器的力和力矩。我们已经了解了飞行器的特性&#xff0c;比如它的物理参数和气动特性&#xff0c;以及行星的…

【网络】高级IO——LT和ET

在上一篇的学习中&#xff0c;我们已经简单的使用了epoll的三个接口&#xff0c;但是仅仅了解那些东西是完全不够的&#xff01;&#xff01;接下来我们将更深入的学习epoll 1.epoll的两种工作模式——LT和ET 下面来举一个例子帮助大家理解ET和LT模式的区别&#xff08;送快递…

Elasticsearch集群的运维与管理

【1】安装启动ES 集群 &#xff08;1.1&#xff09;集群架构规划 OS  ES versionIpnode.nameRolecluster.namees basedirCentOS Linux release 7.8.2003 (Core)elasticsearch-7.14.1 192.168.175.132:9200 cluster&#xff1a;192.168.175.132:9301 node_1 node.mastertrue …

【Python报错已解决】To update, run: python.exe -m pip install --upgrade pip

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 专栏介绍 在软件开发和日常使用中&#xff0c;BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经…

Unity之FPS

目录 &#x1f3ae;MouseLook摄像机旋转脚本 &#x1f3ae;PickUpItem武器拾取脚本 &#x1f3ae;PlayerController玩家控制器 &#x1f3ae;Inventory武器库 &#x1f3ae;Weapon武器抽象类 &#x1f3ae;Weapon_AutomaticGun武器脚本 其实这个教程很早就收藏了就是被20…

HarmonyOS Next开发----使用XComponent自定义绘制

XComponent组件作为一种绘制组件&#xff0c;通常用于满足用户复杂的自定义绘制需求&#xff0c;其主要有两种类型"surface和component。对于surface类型可以将相关数据传入XComponent单独拥有的NativeWindow来渲染画面。 由于上层UI是采用arkTS开发&#xff0c;那么想要…

鸿蒙手势交互(四:多层手势)

四、多层手势 指父子组件嵌套时&#xff0c;父子组件均绑定了手势或事件。有两种&#xff0c;一种默认多层级手势事件&#xff0c;一种自定义多层级手势事件。 默认多层级手势事件&#xff1a;需要分清两个概念&#xff0c;触摸事件&#xff0c;手势与事件 触摸事件&#xf…

Parallels Desktop 20 for Mac中文版发布了?会哪些新功能

Parallels Desktop 20 for Mac 正式发布&#xff0c;完全支持 macOS Sequoia 和 Windows 11 24H2&#xff0c;并且在企业版中引入了全新的管理门户。 据介绍&#xff0c;新版本针对 Windows、macOS 和 Linux 虚拟机进行了大量更新&#xff0c;最大的亮点是全新推出的 Parallels…

智慧火灾应急救援航拍检测数据集(无人机视角)

智慧火灾应急救援。 无人机&#xff0c;直升机等航拍视角下火灾应急救援检测数据集&#xff0c;数据分别标注了火&#xff0c;人&#xff0c;车辆这三个要素内容&#xff0c;29810张高清航拍影像&#xff0c;共31GB&#xff0c;适合森林防火&#xff0c;应急救援等方向的学术研…

【C++ Primer Plus习题】16.10

大家好,这里是国中之林! ❥前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看← 问题: 解答: #include <iostream> #include <string> #include <…

高质量的翻译:应用程序可用性和成功的关键

在日益全球化的应用市场中&#xff0c;开发一款优秀的产品只是成功的一半。另一半&#xff1f;确保你的用户&#xff0c;无论他们在哪里或说什么语言&#xff0c;都能无缝理解和使用它。这就是高质量翻译的用武之地——不是事后的想法&#xff0c;而是应用程序可用性和最终成功…

2-100 基于matlab的水果识别

基于matlab的水果识别。从面积特征、似圆形特征&#xff0c;颜色(rgb值和hsv值)特征对图像中的梨子、苹果、桃子、香蕉和菠萝进行特征提取&#xff0c;边缘检测识别&#xff0c;最后按照筛选出来的特征对水果进行识别。程序已调通&#xff0c;可直接运行。 下载源程序请点链接…

一天认识一个硬件之连接线

我们在日常工作生活中经常会用到许多连接线&#xff0c;比如视频线&#xff0c;USB线&#xff0c;但是他们的区别在哪里&#xff0c;可能太不清楚&#xff0c;今天就来给大家分享一下。 HDMI线 特点&#xff1a;HDMI线是一种全数字化视频和声音发送接口&#xff0c;可以发送未…

PCL 点云圆柱邻域搜索

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 PCL点云算法汇总及实战案例汇总的目录地址链接&#xff1a; PCL点云算法与项目实战案例汇总&#xff08;长期更新&#xff09; 一、概述 本文将介绍如何使用PCL库进…

Snapchat API 访问:Objective-C 实现示例

Snapchat 是一个流行的社交媒体平台&#xff0c;它允许用户发送和接收短暂存在的图片和视频。对于开发者来说&#xff0c;访问 Snapchat API 可以为应用程序添加独特的社交功能。本文将介绍如何在 Objective-C 中实现对 Snapchat API 的访问&#xff0c;并提供一个详细的代码示…