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 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
vue代码分割的实现(codesplit)
Nov 13 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
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
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
javascript实现动态标签云
2015/10/16 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
python连接mysql并提交mysql事务示例
2014/03/05 Python
详解Python中列表和元祖的使用方法
2015/04/25 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
python绘制雪景图
2019/12/16 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
高中自我评价分享
2013/12/05 职场文书
2013的个人自我评价
2013/12/26 职场文书
学习十八大报告感言
2014/02/04 职场文书
四年级科学教学反思
2014/02/10 职场文书
洗发水广告词
2014/03/13 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
校园环保标语
2014/06/13 职场文书
洗手间标语
2014/06/23 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
买卖合同协议书范本
2014/10/18 职场文书
高中生毕业评语
2014/12/30 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
Django实现翻页的示例代码
2021/05/24 Python
python分分钟绘制精美地图海报
2022/02/15 Python
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android