SusTable

轻量表头 + 可滚动行 + 分页页脚 — 与 DataTable 相同的 SusTableController，没有工具栏 / 类型化单元格外壳。

包

SusKit · 数据（商业）

在 Playground 中打开

SusKit · Data

属性

名称	类型	默认值
Controller	Prop<SusTableController>	new SusTableController()	v-model

插槽

没有插槽。

事件

没有公开事件。

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• keyboard-focus
• sus-button
• sus-healthbar
• sus-hidden
• sus-table
• sus-table__action-btn
• sus-table__body
• sus-table__cell
• sus-table__cell--actions
• sus-table__cell--align-center
• sus-table__cell--align-end
• sus-table__cell--boxed
• sus-table__cell--custom
• sus-table__cell--description
• sus-table__cell--ellipsis
• sus-table__cell--number
• sus-table__cell--progress
• sus-table__cell--segments
• sus-table__cell--stretch
• sus-table__cell--two-line
• sus-table__cell-sub
• sus-table__cell-title
• sus-table__footer
• sus-table__footer-actions
• sus-table__footer-btn
• sus-table__footer-info
• sus-table__header
• sus-table__header-cell
• sus-table__header-cell--stretch
• sus-table__header-row
• sus-table__header-title
• sus-table__header-title--align-center
• sus-table__header-title--align-end
• sus-table__header-title--sortable
• sus-table__media--clip
• sus-table__media--rounded
• sus-table__row
• sus-table__row--hoverable
• sus-table__row--selected
• sus-table__row--striped
• sus-table__rows
• sus-table__segment
• sus-table__segment--on
• sus-table__segments
• sus-table__segments--full
• sus-table__segments-count
• sus-table__sort-btn
• sus-table__sort-btn--active

用法

在控制器上配置列和条目，然后把它赋给视图。

var ctrl = new SusTableController();
ctrl.SetColumns(new List<ColumnDef>
{
    new() { Key = "name", Title = "Name", Sortable = true },
    new() { Key = "role", Title = "Role", Sortable = true },
    new() { Key = "lvl", Title = "Lvl", Sortable = true },
});
ctrl.SetItems(new List<object>
{
    new Dictionary<string, object> { ["name"] = "Aria", ["role"] = "Tank", ["lvl"] = 12 },
    new Dictionary<string, object> { ["name"] = "Borin", ["role"] = "DPS", ["lvl"] = 9 },
    new Dictionary<string, object> { ["name"] = "Cira", ["role"] = "Heal", ["lvl"] = 14 },
});
ctrl.SetItemsPerPage(5);

var table = new SusTable();
table.Controller.Value = ctrl;

<template>
  <sus:SusTable :Controller="TableCtrl.Value" />
</template>

<script>
public Prop<SusTableController> TableCtrl = new(new());
// Populate TableCtrl columns/items in code (see above).
</script>

Prop	作用
Controller	SusTableController — 列、条目、排序、分页

说明

• 比 SusDataTable 更简单：没有 toolbar 插槽，没有 kind 预设外壳。
• 单元格来自与 SusDataTable 相同的列工厂，因此双行列（SusHeaders.TwoLine，类 sus-table__cell-title / sus-table__cell-sub）在这里同样可用 — 参见 双行单元格。
• 当 TotalPages > 1 时出现分页页脚。
• 需要类型化单元格 / 全局搜索 / 选择列时 — 使用 SusDataTable。