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.最终效果

相关推荐
默_笙12 小时前
⛵ 我用 React + TS 做了个"调色盘",顺便学会了企业级项目的目录架构
前端·javascript
渣波12 小时前
拒绝 Redux 样板代码:Zustand 核心原理与实战进阶指南(基础、异步与切片模式)
前端·javascript
C++、Java和Python的菜鸟12 小时前
第12章 前端Web进阶(Vue工程化+ElementPlus)
前端·javascript·vue.js
妙码生花13 小时前
让各大 AI 整理出来的前端工程命名最简实践(Vue + TS)
前端·javascript·vue.js
郭wes代码14 小时前
纯 CSS+JS 实战:手搓一张支持自定义的通用金色电子奖状(万字详细拆解)
前端·javascript·css
用户8417948145615 小时前
vxe-table 实现编辑列的权限控制:列级与表级权限管理
vue.js
用户8471810541915 小时前
DeepAgents.js 教程 06—— 跨会话长期记忆(Memory与AGENTS.md)
javascript·agent
Tian_Hang15 小时前
Vue3 父子组件通讯
前端·javascript·vue.js
breeze jiang15 小时前
React memo、useCallback 与 useMemo:父组件多状态时如何减少无效渲染
前端·javascript·react.js
代码不加糖17 小时前
common.js和es6中模块引l入的区别?
前端·javascript·es6