使用element-ui table expand展开行实现手风琴效果


Posted in Javascript onMarch 15, 2019

问题讲解:

在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一些方法乍一看让人摸不着头脑,有些table的常用功能示例代码提供的不是非常详细,所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。

先展示一下ElementUI官方提供的示例代码效果图

使用element-ui table expand展开行实现手风琴效果

可以看到官方代码中在这边没有让这个可展开table自动折叠的功能,我点击了别的标签页后上次点击的行仍旧处在一个展开的状态,而且操控的方式也只能点击到左上角的小箭头才可以控制行的展开状态,体验不是特别好,可以说有点糟糕了,但是我后来在后面的文档中发现The methods 里面有写到一个方法叫toggleRowExpansion,这个方法应该是官方本意上想让我们来自由控制展开状态的,从传递的两个参数来看,一个是row(当前点击的行id),另一个是expended(行展开状态,boolean值),看上去有理有据,但是就是不知道怎么用,因为我始终无法获取到expended这个参数的值,有点气,所以这次我们用另一种方式来实现这个功能。

代码实现:

核心是 row-key、expand-row-keys属性

特别要注意的是row-key传入的是一个Function(row),而expand-row-keys传入的是一个数组,元素的值是要展开的row的key。

row-key这个属性是获取当前行号的,expand-row-keys这个属性是获取到展开的行号的,所以前者为一个单值,而后者是一个数组形式,所以这个属性也同样适用于表格多选列这种情况。

<el-table
        :data="compony"
        style="width: 100%;margin-top:80px"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        @current-change="toggleRowExpansion">
        <el-table-column type="expand">
         <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
           <el-form-item label="公司名称">
            <span>{{ props.row.com_name }}</span>
           </el-form-item>
           <el-form-item label="下属电厂ID">
            <span>{{ props.row.fct_id }}</span>
           </el-form-item>
           <el-form-item label="电厂名称">
            <span>{{ props.row.fct_name }}</span>
           </el-form-item>
           <el-form-item label="用户名">
            <span>{{ props.row.user_name }}</span>
           </el-form-item>
           <el-form-item label="密码">
            <span>{{ props.row.password }}</span>
           </el-form-item>
           <el-form-item label="加入时间">
            <span>{{ props.row.join_time | formatDate}}</span>
           </el-form-item>
           <el-form-item label="离开时间">
            <span>{{ props.row.leave_time }}</span>
           </el-form-item>
          </el-form>
         </template>
        </el-table-column>
        <el-table-column
         label="公司 ID"
         prop="com_id">
        </el-table-column>
        <el-table-column
         label="公司名称"
         prop="com_name">
        </el-table-column>
        <el-table-column label="操作">
         <template slot-scope="scope">
          <el-button
           size="mini"
           @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
           size="mini"
           type="danger"
           @click="handleDelete(scope.$index, scope.row)">删除</el-button>
         </template>
        </el-table-column>
       </el-table>

这边因为要涉及到我项目最终实现的效果,所以我这里就直接把我的整个table都复制上来了,这边的重点主要是table的各个属性,也就是这个代码段的开头,我们在这里涉及到了一个新的监听事件@current-change="toggleRowExpansion",这个事件表示切换行的时候会有一个触发的事件发生,我们在获取了行id,展开行id之后,还要去data里面定义我们所要用到的数据框架。

data() {
   return {
    compony:[],
    // 获取row的key值
    getRowKeys(row) {
      return row.id;
    },
    form: {},
    // 要展开的行,数值的元素是row的key值
    expands: [],
   }
  },

这边我就展示所需要用到的数据布置了,通过getRowKeys方法获取到row的行id值,定义一个expands展开行的数组,最后是业务逻辑代码

data() {
   return {
    compony:[],
    // 获取row的key值
    getRowKeys(row) {
      return row.id;
    },
    form: {},
    // 要展开的行,数值的元素是row的key值
    expands: [],
   }
  },

因为我们现在只要求展开一行,所以每次把需要展开行的id储存进数组时要先清空一次数组,然后在push进去,最终实现效果图

使用element-ui table expand展开行实现手风琴效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
vue使用video插件vue-video-player的示例
Oct 03 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 #Javascript
vue过滤器用法实例分析
Mar 15 #Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 #Javascript
详解vue移动端项目代码拆分记录
Mar 15 #Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 #Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 #Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 #Javascript
You might like
PHP中文件上传的一个问题
2010/09/04 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
python自定义函数def的应用详解
2020/06/03 Python
python 线程的五个状态
2020/09/22 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
党员目标管理责任书
2014/07/25 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
经理岗位职责范本
2015/04/15 职场文书
法律意见书范文
2015/05/20 职场文书
小学同学聚会感言
2015/07/30 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL