el-table展开行子表格无数据时隐藏展开符（vue3+ts）

需求源源不断，代码越写越乱 小菜鸡成长日记

今天后端给我提了一个需求。前面实现了el-table父子表格嵌套,后端希望当子表格没有数据的时候，展开符就不显示。类似于这种：

我一开始的思路是：判断子表格数据是否为空，如果为空，则子表格不显示。但是这样只是实现了表格的隐藏，展开符还是存在且能展开。v-if='props.row.items.length > 0'

 <el-table class="perfect-table" :data="dataList" :size="size" :row-class-name="setRowClassName">
    <el-table-column type="expand">
      <template #default="props">
        <el-table class="perfect-table" :data="props.row.items" size="small" v-if='props.row.items.length > 0' >
          <el-table-column align="center" label="一级部件" prop="partName" />
          <el-table-column align="center" label="二级部件" prop="partName2" />
        </el-table>
      </template>
    </el-table-column>
   </el-table>

但是这样并不能完全将需求实现出来，不如直接将展开符隐藏了，这样既看不见展开符也没法展开了。

给父表格添加:row-class-name="setRowClassName"

  <el-table class="perfect-table" :data="dataList" :size="size" :row-class-name="setRowClassName">
    <el-table-column type="expand">
      <template #default="props">
        <el-table class="perfect-table" :data="props.row.items" size="small">
          <el-table-column align="center" label="一级部件" prop="partName" />
          <el-table-column align="center" label="二级部件" prop="partName2" />
        </el-table>
      </template>
    </el-table-column>
  </el-table>
  

判断有没有子表格，没有就加上isable-expand名

const setRowClassName = ({ row }: { row: SpotDetail }) => {
  return row.items.length > 0 ? '' : 'disable-expand'
}

修改disable-expand类下展开符图标的样式

<style lang="scss" scoped>
:deep(.disable-expand .el-table__expand-column > div) {
  display: none !important;
}
</style>

以上就是实现展开符隐藏的方法。