源码:第一步

<el-table :data="tableData" border :row-class-name="tableRowClassName" @expand-change="expandChange" :expand-row-keys="expands" :row-key='getRowKeys'>
<el-table-column type="expand" label="详情">
<template slot-scope="props">
<el-form label-position="left" class="demo-table-expand" label-width="120px">
<el-form-item label="印章图标" v-if="props.row.isEdit">
<viewer :images="user_img">
<img :src="user_img[0].url" style="width: 60px;height: 60;border:1px solid #eee;border-radius: 5px;"/>
</viewer>
</el-form-item>

第二步

源码:

//设置row-key只展示一行
expands: [],//只展开一行放入当前行id
getRowKeys(row){
return row.id
},

  第三步

代码:

//表格当前行被展开或收起
expandChange(row,expandedRows) {
let that=this
console.log(expandedRows);
//只展开一行
if (expandedRows.length) {//说明展开了
that.expands = []
if (row) {
that.expands.push(row.id)//只展开当前行id
}
} else {//说明收起了
that.expands = []
}

  

element 表格只展开一行(点击下一行上一行关闭)的更多相关文章

  1. element 表格里的input点击回车聚焦下个input

    <template> <card> <el-table ref="singleTable" :data="tableData" h ...

  2. AudioStreamer使用之快速点击下/上一首按钮,音频会重复的问题解决。

    针对此问题,我的做法是在AudioStreamer.h文件新加入一个属性 @property (nonatomic,strong) NSURL *musicUrl; 和一个单例方法: +(id)sha ...

  3. Android listview 制作表格样式+由下往上动画弹出效果实现

    效果是这样的:点击按下弹出表格的按钮,会由下往上弹出右边的列表,按下返回按钮就由上往下退出界面. 布局文件: activity_main.xml <RelativeLayout xmlns:an ...

  4. Vue Element-ui table只展开一行

    直接上代码了哈~ <template> <div class="app-content"> <div class="table_expand ...

  5. 使用element的upload组件实现一个完整的文件上传功能(下)

    本篇文章是<使用element的upload组件实现一个完整的文件上传功能(上)>的续篇. 话不多说,接着上一篇直接开始 一.功能完善—保存表格中每一列的文件列表状态 1.思路 保存表格中 ...

  6. 后端排序时去掉element表格排序的null状态

    经常会遇到远程排序,需要去掉null状态的排序,当设置sortable='custom'时,设置sort-orders为['ascending', 'descending']是不生效的.然后查到了一种 ...

  7. ExpandableListView(三)只展开一个group,没有child不展开group

    本文是自己在实践中,发现的问题. 有时候想让界面更加的人性化,就要实现很多的效果,比如只展开一个group,在点击下个group的同时,关闭之前的group 在一个ExpandableListView ...

  8. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  9. react中antd的表格自定义展开

    antd的表格官方案例中给出的都是固定的图表展开,在做需求的时候,需要使用点击最后一列,然后出现展开内容,实现效果图如下 在最开始设置一个全局变量 const keys = [];在设置列参数的函数中 ...

随机推荐

  1. A Child's History of England.36

    CHAPTER 11 ENGLAND UNDER MATILDA AND STEPHEN The King was no sooner dead than all the plans and sche ...

  2. Scala(二)【基本使用】

    一.变量和数据类型 1.变量 语法:val / var 变量名:变量类型 = 值 val name:String = "zhangsan" 注意 1.val定义的变量想到于java ...

  3. awk的基本用法

    最近遇到导入的csv文件首行为日期,但需要将日期作为列导入到数据库中,直接使用ctl文件好像无法实现,了解到awk这个强大的命令. 导入的CSV文件除了首行为日期,其他的都是格式相同的.需要将首行单独 ...

  4. Linux基础命令---nfsstat显示nfs信息

    nfsstat nfsstat指令用来显示nfs客户端和服务器的活动信息. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora. 1.语法       nfsstat  ...

  5. linux-源码软件管理-yum配置

    总结如下:1.源码配置软件管理2.配置yum本地源和网络源及yum 工作原理讲解3.计算机硬盘介绍 1.1 源码管理软件 压缩包管理命令: # 主流的压缩格式包括tar.rar.zip.war.gzi ...

  6. RocketMQ架构原理解析(三):消息索引

    一.概述 "索引"一种数据结构,帮助我们快速定位.查询数据 前文我们梳理了消息在Commit Log文件的存储过程,讨论了消息的落盘策略,然而仅仅通过Commit Log存储消息是 ...

  7. abp (.net 5)设置默认请求语言为简体中文

    https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization?view=aspnetcore-5.0 默认有3个prov ...

  8. 00 - Vue3 UI Framework - 阅读辅助列表

    阅读列表 01 - Vue3 UI Framework - 开始 02 - Vue3 UI Framework - 顶部边栏 03 - Vue3 UI Framework - 首页 04 - Vue3 ...

  9. 车载以太网第二弹|测试之实锤-AVB测试实践

    背景 AVB(Audio Video Bridging)音视频桥接,是由IEEE 802.1标准委员会的IEEE AVB任务组制定的一组技术标准,包括精确时钟同步.带宽预留和流量调度等协议规范,用于构 ...

  10. 文件系统系列学习笔记 - inode/dentry/file/super(2)

    此篇文章主要介绍下linux 文件系统下的主要对象及他们之间的关系. 1 inode inode结构中主要包含对文件或者目录原信息的描述,原信息包括但不限于文件大小.文件在磁盘块中的位置信息.权限位. ...