element-plus表格隐藏行数功能

    如图所示，element-plus中所带的，这些折叠屏
    折叠行、这些功能可能并不是我们想要的。
    最近有一个需求，就是表格如果超出了某行，遍将多余的行数给进行折叠。
    那么,有什么办法能够给element-plus添加易于维护的拓展代码吗?
    
    我也自行百度过一番，但是百度上的答案，很明显并不是我想要的。
    经过我一番思索，想到了css的序号选择器。序号选择器专门写一个子元素超过3隐藏的类型名。
    
    样式如下
    
    .el-folding > tr:nth-child(n + 4) {
        display: none;
    }
    .el-folding-line {
        transition-duration: 200ms;
        cursor: pointer;
        border-bottom: 1px solid var(--el-table-border-color);
    }
    .el-folding-line:active {
        background-color: #F5F6FB;
    }
    .el-folding-extends {
        /*cursor: pointer;*/
        transition-duration: 400ms;
    }
    .el-folding-extends.rotate {
        cursor: pointer;
        transform: rotate(180deg);
    }
    
    如何让这个功能易于使用和维护，我这里想到了使用vue的自定义指令
    
      // element-table折叠指令
      app.directive('elfold', (el, binding) => {
        const elBody = el.querySelector(".el-table__body>tbody")
        const elBodyC = elBody.children
        if (elBodyC.length > 3) {
          // 给表格添加只展示三行的类名
          if (el.querySelector('.rotate')) {
            elBody.classList.remove('el-folding')
          } else {
            elBody.classList.add('el-folding')
          }
          // 判断有没有创建过面板
          const foldingLine = el.querySelector('.el-folding-line')
          if (foldingLine) {
            if (el?.removeElement) {
              el.removeElement(foldingLine)
            }
          }
          if (!foldingLine) {
            // 创建折叠面板元素
            const extendsTop = document.createElement('div')
            extendsTop.className = "flex-ct p5 el-folding-line"
            const extendsTopButton = document.createElement('i')
            extendsTopButton.className = "fa fa-angle-down el-folding-extends"
            extendsTopButton.style.fontSize = "30px"
            extendsTop.append(extendsTopButton)
            el.append(extendsTop)
            // 控制变量
            let controller = true
            extendsTop.addEventListener('click', () => {
              if (controller) {
                extendsTopButton.classList.add('rotate')
                elBody.classList.remove('el-folding')
              } else {
                extendsTopButton.classList.remove('rotate')
                elBody.classList.add('el-folding')
              }
              controller = !controller
            })
          }
        } else {
          elBody.classList.remove('el-folding')
        }
      })
    
    诺，最后的效果就如图所示了。