element ui table(表格)实现点击一行展开功能


Posted in Javascript onDecember 04, 2018

前言

element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染。

element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击右箭头可以展开,我们的很多需求是点击某一行展开

那是不是无法实现呢?其实,借助element ui的一些属性,轻松实现点击某行展开,我们还是用2.0.9版本官网的例子,

element ui table(表格)实现点击一行展开功能 

对齐改造,使之可以做到这点

<template>
 <el-table
   :data="tableData5"
   style="width: 100%"
   row-key="id"
   :expand-row-keys="expands"
   @row-click="rowClick">
  <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.name }}</span>
     </el-form-item>
     <el-form-item label="所属店铺">
      <span>{{ props.row.shop }}</span>
     </el-form-item>
     <el-form-item label="商品 ID">
      <span>{{ props.row.id }}</span>
     </el-form-item>
     <el-form-item label="店铺 ID">
      <span>{{ props.row.shopId }}</span>
     </el-form-item>
     <el-form-item label="商品分类">
      <span>{{ props.row.category }}</span>
     </el-form-item>
     <el-form-item label="店铺地址">
      <span>{{ props.row.address }}</span>
     </el-form-item>
     <el-form-item label="商品描述">
      <span>{{ props.row.desc }}</span>
     </el-form-item>
    </el-form>
   </template>
  </el-table-column>
  <el-table-column
    label="商品 ID"
    prop="id">
  </el-table-column>
  <el-table-column
    label="商品名称"
    prop="name">
  </el-table-column>
  <el-table-column
    label="描述"
    prop="desc">
  </el-table-column>
 </el-table>
</template>
 
<style>
 .demo-table-expand {
  font-size: 0;
 }
 .demo-table-expand label {
  width: 90px;
  color: #99a9bf;
 }
 .demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
 }
</style>
 
<script>
 export default {
  data() {
   return {
    tableData5: [{
     id: '12987122',
     name: '好滋好味鸡蛋仔',
     category: '江浙小吃、小吃零食',
     desc: '荷兰优质淡奶,奶香浓而不腻',
     address: '上海市普陀区真北路',
     shop: '王小虎夫妻店',
     shopId: '10333'
    }, {
     id: '12987123',
     name: '好滋好味鸡蛋仔',
     category: '江浙小吃、小吃零食',
     desc: '荷兰优质淡奶,奶香浓而不腻',
     address: '上海市普陀区真北路',
     shop: '王小虎夫妻店',
     shopId: '10333'
    }, {
     id: '12987125',
     name: '好滋好味鸡蛋仔',
     category: '江浙小吃、小吃零食',
     desc: '荷兰优质淡奶,奶香浓而不腻',
     address: '上海市普陀区真北路',
     shop: '王小虎夫妻店',
     shopId: '10333'
    }, {
     id: '12987126',
     name: '好滋好味鸡蛋仔',
     category: '江浙小吃、小吃零食',
     desc: '荷兰优质淡奶,奶香浓而不腻',
     address: '上海市普陀区真北路',
     shop: '王小虎夫妻店',
     shopId: '10333'
    }],
 
 
    // 要展开的行,数值的元素是row的key值
    expands: []
   }
  },
  methods:{
   //在<table>里,我们已经设置row的key值设置为每行数据id:row-key="id"
   rowClick(row, event, column) {
    Array.prototype.remove = function (val) {
     let index = this.indexOf(val);
     if (index > -1) {
      this.splice(index, 1);
     }
    };
 
    if (this.expands.indexOf(row.id) < 0) {
     this.expands.push(row.id);
    } else {
     this.expands.remove(row.id);
    }
 
   }
  }
 
 }
</script>

这个例子可以直接复制运行起来,一点问题都没有,上面的代码可以实现点击某行展开,对比官网的例子,我们在table添加了

row-key="id"
:expand-row-keys="expands"
@row-click="rowClick"

这里有2个问题:

1.数据中每项没有一个唯一标示怎么办?

2.实现展开当前行的时候,其他行都能收起来

这2个问题也很简单。第2个问题,在rowClick函数给expands添加之前,先清空这个数组。

if (this.expands.indexOf(row.id) < 0) {
     this.expands = []
     this.expands.push(row.id);
    } else {
     this.expands.remove(row.id);
    }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
一次失败的jQuery优化尝试小结
Feb 06 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
layUI实现列表查询功能
Jul 27 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
elementUI中Table表格问题的解决方法
Dec 04 #Javascript
zepto.js 实时监听输入框的方法
Dec 04 #Javascript
vue 之 css module的使用方法
Dec 04 #Javascript
Vue源码解析之数组变异的实现
Dec 04 #Javascript
小程序指纹验证的实现代码
Dec 04 #Javascript
js实现下拉框二级联动
Dec 04 #Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 #Javascript
You might like
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
php7 新增功能实例总结
2020/05/25 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
详解Python多线程
2016/11/14 Python
Python的多维空数组赋值方法
2018/04/13 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python opencv读mp4视频的实例
2018/12/07 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
硕士研究生个人求职信
2013/12/04 职场文书
优秀员工自荐书
2013/12/19 职场文书
医药营销个人求职信
2014/04/12 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
高中历史教学反思
2016/02/19 职场文书
JS函数式编程实现XDM一
2022/06/16 Javascript
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技