element中el-table实现根据是否存在子列表隐藏展开行

554 阅读1分钟
el-table-column标签设置type="expand"会默认显示一个展开图标,如果没有子列表,可以通过设置row-class-name来隐藏
html
<el-table :data="list" :row-class-name="hideExpand">
  <el-table-column type="expand">
    <template #default="{ row }">
      <!-- contents -->
    </template>
  </el-table-column>
</el-table>
js
const hideExpand = (item) =>{
    <!-- 判断长度 -->
    if(!item.row.children?.length){
        return 'hideExpandIcon'
    }
}
scss
:deep(.hideExpandIcon) {
    .el-table__expand-icon{
        display: none;
    }
}

效果展示: image.png