使用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 相关文章推荐
javascript 自定义事件初探
Aug 21 Javascript
JS 时间显示效果代码
Aug 23 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
js如何验证密码强度
Mar 18 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
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输出全球各个时区列表的方法
2015/03/31 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
Python实现字典的key和values的交换
2015/08/04 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
python文件的md5加密方法
2016/04/06 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Python格式化输出%s和%d
2018/05/07 Python
Python中的 enum 模块源码详析
2019/01/09 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
python学生管理系统学习笔记
2019/03/19 Python
基于python操作ES实例详解
2019/11/16 Python
python循环输出三角形图案的例子
2019/11/22 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
python中怎么表示空值
2020/06/19 Python
简述数据库的设计过程
2015/06/22 面试题
自我评价的正确写法
2013/09/19 职场文书
幼师专业求职推荐信
2013/11/08 职场文书
一年级家长会邀请函
2014/01/25 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
工厂标语大全
2014/10/06 职场文书
导游词之任弼时故居
2020/01/07 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
MyBatis 动态SQL全面详解
2021/10/05 MySQL