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

相关推荐
henujolly21 小时前
ethers.js读取合约信息
开发语言·javascript·区块链
wuhen_n1 天前
高阶函数与泛型函数的类型体操
前端·javascript·typescript
POLITE31 天前
Leetcode 437. 路径总和 III (Day 16)JavaScript
javascript·算法·leetcode
難釋懷1 天前
解决状态登录刷新问题
java·开发语言·javascript
一起养小猫1 天前
Flutter实战:从零实现俄罗斯方块(三)交互控制与事件处理
javascript·flutter·交互
lethelyh1 天前
Vue day1
前端·javascript·vue.js
无风听海1 天前
AngularJS中 then catch finally 的语义、执行规则与推荐写法
前端·javascript·angular.js
利刃大大1 天前
【Vue】组件化 && 组件的注册 && App.vue
前端·javascript·vue.js
Whisper_Sy1 天前
Flutter for OpenHarmony移动数据使用监管助手App实战 - 周报告实现
开发语言·javascript·网络·flutter·php
Anastasiozzzz1 天前
leetcodehot100--最小栈 MinStack
java·javascript·算法