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 相关文章推荐
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 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
杏林同学录(二)
2006/10/09 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
JS画线(实例代码)
2013/11/20 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
python使用Matplotlib画条形图
2020/03/25 Python
python list多级排序知识点总结
2019/10/23 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
美国存储和组织商店:The Container Store
2017/08/16 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
咨询公司各岗位职责
2013/12/02 职场文书
七年级音乐教学反思
2014/01/26 职场文书
新学期开学演讲稿
2014/05/24 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
MySQL 数据类型详情
2021/11/11 MySQL
浅谈JavaScript作用域
2021/12/06 Javascript