Skip to content

Slots 插槽 ​

slotspropsdescribe
tableHeader{col}表头,一般推荐使用 customHeaderCell 。这个插槽,在批量自定义表头的时候会更方便。
empty--空数据状态
expand{col, row}展开行
customBottom--表格底部。

INFO

如果您想自定义单元格,请使用 StkTableColumn['customCell'] 属性。

customCell 侧插槽 ^1.2.7 ​

下表是你的 customCell 组件的插槽(不是 StkTable 的顶层插槽)。仅在列配置了 customCell 时传入,用于把内置装饰交回给你摆放:

slots内置内容describe
stkFoldIcon展开控件:箭头 / 懒加载 loading / 叶子占位格渲染即拿回内置外观与展开态旋转,无需自行判断状态;不渲染则需自绘控件并标记 data-stk-fold
stkTreeIndent按层级的缩进格 + 层级引导线(treeConfig.showGuide)供 tree-node 列使用;showGuide 关闭时只剩缩进
stkDragIcon行拖拽把手供 type: 'dragRow' 列使用

摆放契约

消费这些插槽时,单元格根元素需要 height: 100%; display: flex; align-items: center;:引导线画在缩进格内并撑满整行高,根元素若不是撑满行高的 flex 行,线会被截断。

公共树组件

也可以从 stk-table-vue 导入 StkTreeCell 作为完整的 customCell,或组合使用 StkTreeIndent 与 StkTreeFoldIcon。展开控件由 expandable、loading、expanded 这组公开状态驱动。

用法示例

见文件管理树。

customBottom ​

loading

TIP

customBottom 可用于在表格底部加一个元素,使用 IntersectionObserver 监听是否滚动到表格底部。

根据 MIT 许可证发布