使用element-ui中table expand展开行控制显示隐藏
问题讲解:
在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一些方法乍一看让人摸不着头脑,有些table的常用功能示例代码提供的不是非常详细,所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。
先展示一下ElementUI官方提供的示例代码效果图
可以看到官方代码中在这边没有让这个可展开table自动折叠的功能,我点击了别的标签页后上次点击的行仍旧处在一个展开的状态,而且操控的方式也只能点击到左上角的小箭头才可以控制行的展开状态,体验不是特别好,可以说有点糟糕了,但是我后来在后面的文档中发现The methods 里面有写到一个方法叫toggleRowExpansion,这个方法应该是官方本意上想让我们来自由控制展开状态的,从传递的两个参数来看,一个是row(当前点击的行id),另一个是expended(行展开状态,boolean值),看上去有理有据,但是就是不知道怎么用,因为我始终无法获取到expended这个参数的值,有点气,所以这次我们用另一种方式来实现这个功能。
1 <template>
2 <el-table ref="table" border stripe highlight-current-row :data="tableData5" style="width: 800px;">
3 <el-table-column label="商品 ID" prop="id" width="100">
4 </el-table-column>
5 <el-table-column label="商品名称" prop="name">
6 </el-table-column>
7 <el-table-column label="描述" prop="desc">
8 </el-table-column>
9 <el-table-column label="操作" width="100">
10 <template slot-scope="scope">
11 <el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
12 </template>
13 </el-table-column>
14 <el-table-column type="expand" width="1">
15 <template slot-scope="props">
16 <el-form label-position="left" inline class="demo-table-expand">
17 <el-form-item label="商品名称">
18 <span>{{ props.row.name }}</span>
19 </el-form-item>
20 </el-form>
21 </template>
22 </el-table-column>
23 </el-table>
24 </template>
25
26 <script>
27 export default {
28 data() {
29 return {
30 tableData5: [{
31 id: '1',
32 name: '好滋好味鸡蛋仔1',
33 desc: '荷兰优质淡奶,奶香浓而不腻1',
34 }, {
35 id: '2',
36 name: '好滋好味鸡蛋仔2',
37 desc: '荷兰优质淡奶,奶香浓而不腻2',
38 }, {
39 id: '3',
40 name: '好滋好味鸡蛋仔3',
41 desc: '荷兰优质淡奶,奶香浓而不腻3',
42 }, {
43 id: '4',
44 name: '好滋好味鸡蛋仔4',
45 desc: '荷兰优质淡奶,奶香浓而不腻4',
46 }]
47 };
48 },
49 methods: {
50 toogleExpand(row) {
51 let $table = this.$refs.table;
52 $table.toggleRowExpansion(row)
53 }
54 }
55 }
56 </script>
我们一般会点击按钮去展开查看详情,所以我们替换箭头为“查看详情”按钮,通过toggleRowExpansion方法展开合闭expand。效果如图:
因为我设置了<el-table-column type="expand" width="1"></el-table-column> 会多出1px的边距,所以我们可以再在最外层放一个空的div,设置样式overflow:hidden;
再设置此table的样式margin-left:1px;好了,完美实现。
放上项目最终的效果图,无多出的1px边框。
同样的,toggleRowExpansion方法也支持手风琴效果,点击展开自己的同时关闭原先除自己之外的已打开的展开项,实现手风琴,修改methods→toogleExpand方法:
toogleExpand(row) {
let $table = this.$refs.table;
this.tableData5.map((item) => {
$table.toggleRowExpansion(item, false)
})
$table.toggleRowExpansion(row)
}
table的toggleRowExpansion方法可以传两个参数,第一个参数传row,第二个参数传false,意思是合闭expand。我们把每行的expand关闭一次,再把对应的行打开,这样就实现了手风琴效果了。
新的问题,当我们点击打开了手风琴,每次都至少有一个是打开状态的,这样很明显是bug了,我们做一下让已打开行的expand合闭。
bug原因:当我们点击已打开的expand想关闭它时,相当于走了一遍$table.toggleRowExpansion(row, false)后,又走了一遍$table.toggleRowExpansion(row),所以这行的expand又被打开了。我们把“合闭/打开“的expand对应的行去除“合闭“操作。
修复toogleExpand方法:
toogleExpand(row) {
let $table = this.$refs.table;
this.tableData5.map((item) => {
if (row.id != item.id) {
$table.toggleRowExpansion(item, false)
}
})
$table.toggleRowExpansion(row)
}
点击展开内容时,遍历外层数组,找到除了当前点击的展开项之外的行,关闭除自己之外的已展开项,然后展开或者关闭当前点击的行。
嗯,就酱啦~
使用element-ui中table expand展开行控制显示隐藏的更多相关文章
- Element Ui中table实现表格编辑效果
主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- (Element UI 组件 Table)去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- react ,ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
- 使用element-ui table expand展开行实现手风琴效果
写这篇博客的初衷:官网演示效果为点击toggle,已经展开的项不会因为其他项展开而关闭,所以延伸了下,扩展为手风琴效果. 效果前瞻: 官网table expand地址:http://element-c ...
- element ui 中的 resetFields() 报错'resetFields' of undefined
每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...
- element ui中的一些小技巧
最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台. 遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...
随机推荐
- 走近OPENCV // opencv 2.4.9+vs2013配置
一直很懒去配opencv,这几周忍不了终于抽空来配了一下环境... 用的是旧版opencv2.4系列,最新到3.0了,之后再看看教程不知道有什么特别大的区别. (FF14国服没有4.0 // 8.19 ...
- python 实现爬取网站下所有URL
python3 实现爬取网站下所有URL 获取首页元素信息: 首页的URL链接获取: 遍历第一次返回的结果: 递归循环遍历: 全部代码如下: 小结: python3.6 requests && ...
- Thrift框架快速入门
Thrift介绍1.什么是thrift?thrift早期由facebook内部团队开发,主要用于实现跨语言间的方法调用,属于远程方法调用的一种,后开源纳入apache中,成为了apache thrif ...
- WPF:Task与事件在下载同步界面中的应用
//设置一个下载事件类,可传输一个字符串 public class DownloadEventArgs:EventArgs { public string id { get; ...
- 灰度级分层(一些基本的灰度变换函数)基本原理及Python实现
1. 基本原理 灰度级分层通常用于突出感兴趣的特定灰度范围内的亮度.灰度级分层有两大基本方法. 将感兴趣的灰度范围内的值显示为一个值(比如0),而其他范围的值为另外一个值(255). 将感兴趣的灰度范 ...
- Windows to Linux API 映射
- 02.Mybatis的动态代理方式实现增删改查
动态代理的方式实现增删改查: 通过约定的方式定位sql语句 约定 > 配置文件 > 硬编码 约定的目标是省略掉通过硬编码的方式定位sql的代码,通过接口直接定位出sql语句,以下代码为通过 ...
- react学习(一)--JSX简介
由于在中国银联实习的项目要用到react,所以不得不硬着头皮把react学习一下.这是要往全栈发展吗0.0 正文: 一个最简单的React例子如下, ReactDOM.render( <h1&g ...
- idea中的springboot项目如何不用重新编译,自动热部署
两步走:引入依赖,配置idea 在pom.xml中引入如下依赖,关键字:devtools 第二步,修改idea两处配置 2.1 windows下,ctl+alt+s打开idea配置菜单 左上角输入框搜 ...
- Java中只有值传递,(及值传递与引用传递详解)
首先呢,我们来说一下值传递与引用传递的区别(这两个玩意儿实在调用函数的时候提到的) 比如说 code( a) code( int a ) code(a)是调用函数,a是我们原本函数的一个值类型,然后使 ...