源码:第一步

<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. 100个Shell脚本——【脚本8】每日生成一个文件

    [脚本8]每日生成一个文件 要求:请按照这样的日期格式(xxxx-xx-xx)每日生成一个文件,例如今天生成的文件为)2017-07-05.log, 并且把磁盘的使用情况写到到这个文件中,(不用考虑c ...

  2. APK 反编译以及遇到的问题

    APK反编译: https://www.cnblogs.com/geeksongs/p/10864200.html 遇到的问题 https://www.jianshu.com/p/55bf5f688e ...

  3. python做一个http接口测试框架

    目录结构 project case#测试用例 suite#测试目录 logs#测试日志 papi#测试类 result#测试结果 setting.py#配置文件 1.日志类,用于测试时日志记录 pya ...

  4. redis入门到精通系列(二):redis操作的两个实践案例

    在前面一篇博客中我们已经学完了redis的五种数据类型操作,回顾一下,五种操作类型分别为:字符串类型(string).列表类型(list).散列类型(hash).集合类型(set).有序集合类型(so ...

  5. Spring(4):Mybatis和Spring整合

    第一步:创建数据库 MySQL代码 1 CREATE DATABASE `mybatis` ; 2 3 USE `mybatis`; 4 5 CREATE TABLE `user` ( 6 `id` ...

  6. 【Service】【MiddleWare】【Message】rabbitMQ

    1. 概念: 1.1. 消息型中间件:遵循AMQP协议(高级消息队列协议)AMQP 0-9-1 AMQP 1.0 1.2. 路由模型: direct topic fan-out headers 1.3 ...

  7. java 动态代理—— Mybaties 拦截器链基本原理实现

    1.摘要 Mybaties 中有个分页插件,之前有特意的去了解了一下原理 :https://www.cnblogs.com/jonrain0625/p/11168247.html,从了解中得知分页插件 ...

  8. .net core容器添加时区和libgdi+和下载加速

    国内.net core镜像下载加速 比如对于mcr.microsoft.com/dotnet/core/aspnet:3.1,下载是走的azure全球cdn,国内访问很慢. 国内访问可以把mcr.mi ...

  9. shell脚本 awk实现实时监控网卡流量

    一.简介 通过第3方工具获得网卡流量,这个大家一定很清楚.其实通过脚本一样可以实现效果.下面是我个人工作中整理的数据.以下是shell脚本统计网卡流量. 现原理: cat /proc/net/dev ...

  10. Linux入侵 反弹shell

    目录 一.简介 二.命令 三.NetCat 一.简介 黑入服务器很少会是通过账号密码的方式进入,因为这很难破解密码和很多服务器都做了限制白名单. 大多是通过上传脚本文件,然后执行脚本开启一个端口,通过 ...