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入门知识简介
Mar 04 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
围观tangram js库
Dec 28 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
JS实现的对象去重功能示例
Jun 04 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中的CMS的涵义
2007/03/11 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
Python for循环搭配else常见问题解决
2020/02/11 Python
postman和python mock测试过程图解
2020/02/22 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
如何在pycharm中安装第三方包
2020/10/27 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
python压包的概念及实例详解
2021/02/17 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
会计与审计专业大专生求职信
2013/10/03 职场文书
逃课上网检讨书
2014/02/20 职场文书
2014年领班工作总结
2014/11/25 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
如何用python插入独创性声明
2021/03/31 Python
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
python读取mat文件生成h5文件的实现
2022/07/15 Python
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers