base里的group by分组怎么折叠

疑问解答
1

就是用base，通过group by分组，有些分组有很多的页面，导致查看挺麻烦的，这些分组能不能折叠本组下的页面的？？？

1 个赞
2

感觉最简单方案是, 等官方实现…

这类需求并不难想到, 除了缺个 “折叠分组”, Ob 的 Bases 还缺根据数值型字段范围分组 [0-10], [10-20], [20,100+], 缺列表型字段的同时分配多组, 嵌套折叠分组 … 参考各家软件的聚合分组设计, 随便就能想到很多可完善的地方

楼主提到的这个, 我理解大致等同于 Add ability to fold groups in Bases views - Feature requests

搜索时看到对 Bases 类似需求有一大把, 顺便还发现提需求的帖子有可能被官方标记 tag: valuable, 举例另一个需求 Bases: Group By / Sorting improvement: make a note fall into multiple groups - Feature requests 就被标了, 楼主关心的这个没被标 valuable

所以官方啥时能做出来? 不知道
标记 valuable 会更快做出来? 也许吧


最后, AI 生成的方案是利用 js 切换 class, 然后 css 实现显示隐藏

需要开启以下 css 片段

/* 添加折叠图标到分组标题 */
.bases-group-heading {
   cursor: pointer;
   position: relative;
   user-select: none;
}

.bases-group-heading::before {
   content: '▼';
   display: inline-block;
   margin-right: 8px;
   transition: transform 0.2s;
   font-size: 0.8em;
}

/* 折叠状态 */
.bases-group-heading.collapsed::before {
   transform: rotate(-90deg);
}

/* 默认折叠 */
.bases-group-heading.collapsed + .bases-tbody {
   height: 0 !important;
   overflow: hidden;
   opacity: 0.3;
   pointer-events: none;
   /*display: none;*/
}


/* 展开状态 */
.bases-group-heading:not(.collapsed) + .bases-tbody {
   display: block;
}

需要以任意方式执行以下 js 脚本 (贴控制台里执行一次)

    function recalcTablePositions() {
       let currentTop = 0;
       document.querySelectorAll('.bases-table').forEach(table => {
           const tbody = table.querySelector('.bases-tbody');
           const heading = table.querySelector('.bases-group-heading');

           // 如果折叠了，只计算标题的高度
           if (heading && heading.classList.contains('collapsed')) {
               table.style.top = currentTop + 'px';
               currentTop += heading.offsetHeight;
           } else {
               // 展开状态，计算整个表格高度
               table.style.top = currentTop + 'px';
               currentTop += table.offsetHeight;
           }
       });
   }

   // 修改折叠点击事件
   document.querySelectorAll('.bases-group-heading').forEach(heading => {
       heading.addEventListener('click', function() {
           this.classList.toggle('collapsed');
           recalcTablePositions(); // 重新计算位置
       });
   });

   // 初始化时也要计算一次
   recalcTablePositions();

PixPin_2026-02-20_08-42-49

注意这只算原型, 仅在最简单的单个 Bases 直接打开的场景测试能用, 如果非常迫切需要折叠功能可以试试
要想做得兼容复杂的嵌入 Bases, 支持大量滚动操作后仍不出问题, 这还得花不少功夫