如何设置 table表格type=expand没数据时不显示箭头

问题描述

当接口返回的数据没有子数据时不显示展开箭头，同时禁止点击展开。

解决方法

 1、根据是否有子数据判断是否显示展开箭头

<el-table :data="data" border stripe size="small" :row-class-name="getRowClass"></el-table>
// 如果子元素没数据的不显示展开箭头
    getRowClass({ row }) {
      let res = [];
      // 当子列表没有数据时添加类名
      if (row.targetList.length <= 0)
        res.push('row-expand-unhas');
      return res;
    },

2、设置css样式隐藏箭头

根据row-expand-unhas 类名添加样式

<style lang="scss" scoped> 
//隐藏箭头
/deep/.row-expand-unhas .el-table__expand-column .el-icon{  
visibility: hidden; 
}

</style>

3、设置没有展开箭头禁止点击

第二步利用样式隐藏了箭头，但是点击时候还有触发事件，利用css属性禁止点击操作

//禁止点击
/deep/.row-expand-unhas .el-table__expand-column{
pointer-events: none; 
}