锐客网

  1. 首页 > it技术 > >

vue-el-table中实现多行点击展开和隐藏

本文是为了记录曾经踩过的坑，愿以后的日子里不再踩坑
在vue中，el-table十分常用，有时会出现这样一种交互，就是表格中的某项大于xxx行时显示查看全部按钮，点击可以展开和收起，如下：
vue-el-table中实现多行点击展开和隐藏
文章图片

  • 这里是超过八行展示查看全部按钮，少于等于八行就正常展示
  • 点击查看全部，按钮变成收起，点击收起，按钮恢复原状
    如下：vue-el-table中实现多行点击展开和隐藏
    文章图片

    其他列就不再赘述，只看展开收起这一列，下面来看实现：
思路：
  • 因为list里并没有一项可以让我们来区分是哪一个item，所以一般情况会出现，点击一个查看全部，那么所有的查看全部都会展开，点击收起亦然，
  • 所以我们要通过$set来给每一项添加能够区分他自己和其他item的属性，通过对这个属性的改变来控制这一个item的改变
具体实现：
  • 在打开页面时发请求获取列表数据，然后对数据进行处理
this.tableData = https://www.it610.com/article/res.data || []; tableData.forEach((item) => { //通过$set给每一项添加一个属性displayCount this.$set(item, 'displayCount', 8); });

  • 来看template，aaalist是表格里“行数”的值

// 样式 .hideBtn { display: none; }

methods: { // 查看全部时，将所有都给到 viewAll(row) { row.displayCount = row.aaaList.length; }, // 收起多出部分时，只取前8条 hideList(row) { row.displayCount = 8; } }

简单实现就这样啦，附aaaList格式，这样好理解些：
"aaaList": [ "这是第一行", "这是第二行", "这是第三行", "这是第四行", "这是第五行", "这是第六行", "这是第七行", "这是第八行", "这是第九行", "这是第十行", "这是第十一行", "这是第十二行", "这是第十三行" ],

【vue-el-table中实现多行点击展开和隐藏】不忘初心，方得始终~~喵~
由于小白一枚，所以急需大神指点～

    推荐阅读


    上一篇：wordpress|WordPress配置SMTP服务发送邮件,实现注册和找回密码功能

    下一篇：Android配置ADB