el-table控制type=“expand“展开列 根据条件显示或隐藏展开按钮

1,通过样式控制 首先定义行class样式 在组件中需通过样式穿透

复制代码
::v-deep {
  .row-expand-unhas .el-table__expand-column {
    pointer-events: none;
  }
  .row-expand-unhas .el-table__expand-column .el-icon {
    visibility: hidden;
  }
}

2,行判断数据条件 添加class

复制代码
    <el-table
      ref="tableRef"
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      :height="tableHeight"
      :row-class-name="getRowClass"
      @expand-change="handleExpandChange"
    >
      <el-table-column type="expand">
        <template #default="props">
....
        </template>
      </el-table-column>


    // 根据是否合计行判断是否隐藏展开按钮
    getRowClass({row}) {
      const res = []
      if (row.sector !== '合计') {
        res.push('row-expand-has')
        return res
      } else {
        res.push('row-expand-unhas')
        return res
      }
    },

3.最终效果

相关推荐
逆光如雪1 小时前
移动端卡片边框怎么做高级?我用 CSS 实现了设计师的刁钻要求
前端·css·vue.js
莹宝思密达2 小时前
地图显示西安经济开发区边界线-2023.12
前端·vue.js·数据可视化
小龙报2 小时前
【Coze-AI智能体平台】Coze OpenAPI 开发手册:鉴权、接口调用与 SDK 实践
javascript·人工智能·python·深度学习·microsoft·文心一言·开源软件
神の愛2 小时前
利用json-to-ts工具进行转换,放置在typeScript.ts文件中
javascript·typescript·json
悟空瞎说3 小时前
深度解析:Vue3 为何弃用 defineProperty,Proxy 到底强在哪里?
前端·javascript
leafyyuki3 小时前
告别 Vuex 的繁琐!Pinia 如何以更优雅的方式重塑 Vue 状态管理
前端·javascript·vue.js
Hooray3 小时前
AI 时代的管理后台框架,应该是什么样子?
前端·vue.js·ai编程
某人辛木3 小时前
nodejs下载安装
开发语言·前端·javascript
zzginfo3 小时前
javascript 类定义常见注意事项
开发语言·前端·javascript
天下无贼!3 小时前
【功能实现】基于Vue3+TS实现大文件分片上传
开发语言·javascript·node.js·vue·html5