前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >el-table使用expand可点击整行展开并且在没有数据时隐藏展开按钮

el-table使用expand可点击整行展开并且在没有数据时隐藏展开按钮

原创
作者头像
我只会写Bug啊
发布2024-05-31 10:58:56
5240
发布2024-05-31 10:58:56
举报
文章被收录于专栏:Bug EngineerBug Engineer

1. 无数据隐藏展开按钮

当行内容过多并且不想显示横向滚动条时

或者 点击该行可以获取子集数据时可以使用 Table 展开行功能

但是 type = expand 有一个比较坑的点是在没有子集数据时,也会展示展开箭头,空白显示,如

代码语言:js
复制
修改方案有三步:

// 第一步 el-table标签添加 row-class-name(行的 className 的回调方法)
:row-class-name="iconHide"

// 第二步 无子集时不展示下拉箭头  hasChild为后端返回的判断标记 符合条件的行会多一个clss
methonds:{
    iconHide({ row }) {
      console.log('row', row)
      if (!row.hasChild || row.hasChild === '0') {
        return 'icon-no'
      }
    }
  }
   
   
// 第三步 css 修改样式
::v-deep .icon-no .el-table__expand-icon {
  display: none;
}

2. 点击整行均可展开

代码语言:js
复制
//el-table中标签添加
row-key="id"
:expand-row-keys="expands" // 可以通过该属性设置 Table 目前的展开行,需要设置 row-key 属性才能使用,该属性为展开行的 keys 数组。
@row-click="clickRowHandle" // 当某一行被点击时会触发该事件

// 定义expands
data(){
    expands:[]
}

// methods

methods: { 
      clickRowHandle(row, column, event) {
        if (this.expands.includes(row.id)) {
          this.expands = this.expands.filter((val) => val !== row.id)
        } else {
          // this.expands = []  需要需求是每次只可展开一行 可打开此注释
          this.expands.push(row.id)
      }
    },
}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 无数据隐藏展开按钮
  • 当行内容过多并且不想显示横向滚动条时
    • 或者 点击该行可以获取子集数据时可以使用 Table 展开行功能
      • 2. 点击整行均可展开
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档