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 = [];在设置列参数的函数中 ...
随机推荐
- accent, accept
accent A colon (:) is used to represent a long vowel, e.g. sheet /ʃiːt/ and shit /ʃit/. The word bed ...
- 通信方案软件设计(环形动态申请内存,支持USART+IIC+SPI+CAN协议
1 <STM32进阶之串口环形缓冲区实现>中讲得比较清楚(链接) 2 amobbs中讲的方法有点复杂,以下是链接和参考源码: 通信方案软件设计(环形动态申请内存,支持USART+IIC+S ...
- SQL查询:并集、差集、交集
新建两个表进行测试: test_a ID name 1 曹操 2 郭嘉 3 孙权 4 周瑜 test_b ID name 1 刘备 2 关羽 3 张飞 4 孙权 5 周瑜 1.UNION形成并集 UN ...
- 【Matlab】xticks/xticklabels的用法
先说一下我自己的理解,这东西就是把原来的有的标签位置换成自己的标签名称,一般都是要手动设置看物理意义. https://ww2.mathworks.cn/help/matlab/ref/xticks. ...
- 【C/C++】贪心/算法笔记4.4/PAT B1020月饼/PAT B1023组内最小数
简单贪心 所谓简单贪心,就是每步都取最优的一种方法. 月饼问题:有N种月饼,市场最大需求量D,给出每种月饼的库存量和总售价. 思路:从贵的往便宜的卖.如果当前的已经卖完了,就卖下一个.如果剩余D不足, ...
- C++11 关键字 const 到底怎么用?
Const 的作用及历史 const (computer programming) - Wikipedia 一.历史 按理来说,要想了解一件事物提出的原因,最好的办法就是去寻找当时的历史背景,以及围绕 ...
- 『学了就忘』Linux服务管理 — 75、Linux系统中的服务
目录 1.服务的介绍 2.Windows系统中的服务 3.Linux系统中服务的分类 4.独立的服务和基于xinetd服务的区别 5.如何查看一个服务是独立的服务还是基于xinetd的服务 (1)查看 ...
- 模板方法模式(Template Method Pattern)——复杂流程步骤的设计
模式概述 在现实生活中,很多事情都包含几个实现步骤,例如请客吃饭,无论吃什么,一般都包含点单.吃东西.买单等几个步骤,通常情况下这几个步骤的次序是:点单 --> 吃东西 --> 买单. 在 ...
- Django常用的QuerySet操作
在这里我根据是否支持链式调用分类进行介绍 1. 支持链式调用的接口 all 使用频率比较高,相当于SELECT * FROM table 语句,用于查询所有数据. filter 使用频率比较高,根据条 ...
- Django 中间件理解
中间件 django 中的中间件(middleware),在django中,中间件其实就是一个类,在请求到来和结束后,django会根据自己的规则在合适的时机执行中间件中相应的方法. 应用场景,对所有 ...