element 表格只展开一行(点击下一行上一行关闭)


源码:第一步
<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 表格只展开一行(点击下一行上一行关闭)的更多相关文章
- element 表格里的input点击回车聚焦下个input
<template> <card> <el-table ref="singleTable" :data="tableData" h ...
- AudioStreamer使用之快速点击下/上一首按钮,音频会重复的问题解决。
针对此问题,我的做法是在AudioStreamer.h文件新加入一个属性 @property (nonatomic,strong) NSURL *musicUrl; 和一个单例方法: +(id)sha ...
- Android listview 制作表格样式+由下往上动画弹出效果实现
效果是这样的:点击按下弹出表格的按钮,会由下往上弹出右边的列表,按下返回按钮就由上往下退出界面. 布局文件: activity_main.xml <RelativeLayout xmlns:an ...
- Vue Element-ui table只展开一行
直接上代码了哈~ <template> <div class="app-content"> <div class="table_expand ...
- 使用element的upload组件实现一个完整的文件上传功能(下)
本篇文章是<使用element的upload组件实现一个完整的文件上传功能(上)>的续篇. 话不多说,接着上一篇直接开始 一.功能完善—保存表格中每一列的文件列表状态 1.思路 保存表格中 ...
- 后端排序时去掉element表格排序的null状态
经常会遇到远程排序,需要去掉null状态的排序,当设置sortable='custom'时,设置sort-orders为['ascending', 'descending']是不生效的.然后查到了一种 ...
- ExpandableListView(三)只展开一个group,没有child不展开group
本文是自己在实践中,发现的问题. 有时候想让界面更加的人性化,就要实现很多的效果,比如只展开一个group,在点击下个group的同时,关闭之前的group 在一个ExpandableListView ...
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- react中antd的表格自定义展开
antd的表格官方案例中给出的都是固定的图表展开,在做需求的时候,需要使用点击最后一列,然后出现展开内容,实现效果图如下 在最开始设置一个全局变量 const keys = [];在设置列参数的函数中 ...
随机推荐
- Dubbo消费者异步调用Future使用
Dubbo的四大组件工作原理图,其中消费者调用提供者采用的是同步调用方式.消费者对于提供者的调用,也可以采用异步方式进行调用.异步调用一般应用于提供者提供的是耗时性IO服务 一.Future异步执行原 ...
- Dubbo管控平台
2019年初,官方发布了Dubbo管理控制台0.1版本.结构上采取了前后端分离的方式,前端使用Vue和Vuetify分别作为Javascript框架和UI框架,后端采用Spring Boot框架 一. ...
- 【面试】【Linux】【Web】基础概念
1. HTTP https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol 2. TCP handshake https://en.wikipe ...
- springboot项目启动慢,怀疑jdk有问题
项目启动慢,并且没有启动日志,开发环境和windows服务器都正常,到linux后出现问题,你觉得会是哪儿的问题? 最近收到一位同事求助,说springboot应用在客户的一台Linux机器上启动非常 ...
- 【C#】【MySQL】C#连接MySQL数据库(三)登陆注册代码
项目结构 项目代码 WebForm_Login.aspx <%@ Page Language="C#" AutoEventWireup="true" Co ...
- 记一次单机Nginx调优,效果立竿见影
一.物理环境 1.系统是Centos 8,系统配置 2核4G,8M带宽,一台很轻的应用服务器. 2.站点部署情况.但站点部署两个实例,占用两个端口,使用nginx 负载转发到这两个web站点. 二. ...
- Charles 手机抓包
Charles 手机抓包 请求抓包对于程序员调试代码必不可少,Charles是一个用与抓包的好工具(也可以使用Fiddler),Charles抓包是通过中间人代理实现,在客户端和服务端通信时,Char ...
- 如何基于 Docker 快速搭建 Springboot + Mysql + Redis 项目
目录 前言 项目目录 搭建项目 1. docker安装启动mysql以及redis 1.1 安装mysql 1.2 安装redis 2. 初始化数据库 3.创建项目 4.初始化代码 4.1 全局配置文 ...
- [BUUCTF]PWN——hitcontraining_heapcreator
hitcontraining_heapcreator 附件 步骤: 例行检查,64位程序,开启了canary和nx 本地试运行一下,看看大概的情况,经典的堆的菜单 64位ida载入,main函数没有什 ...
- [BUUCTF]PWN——jarvisoj_level1
jarvisoj_level1 附件 步骤: 例行检查,32位程序,没有开任何保护 本地运行一下程序,看看大概的情况,可以看到输出了一个地址 32位ida载入,习惯性的检索程序里的字符串,没有发现可以 ...