Table 表格

基础数据表格：筛选、列设置、多级表头、树形、虚拟滚动、固定列、多选、展开行、合计。

基础用法

表头漏斗可筛选；右上角「列设置」可勾选显示列；点击可排序列表头切换升序 / 降序 / 取消。

姓名	角色	年龄	城市
张三	admin	28	上海
李四	member	22	杭州
王五	member	31	北京
赵六	admin	26	深圳

<script setup lang="ts">
import { DanTable } from '@dandan-ui/ui'
import type { TableColumn } from '@dandan-ui/ui'

const columns: TableColumn[] = [
  { prop: 'name', label: '姓名', minWidth: 100, filterable: true },
  {
    prop: 'role',
    label: '角色',
    width: 120,
    filterable: {
      type: 'select',
      options: [
        { label: '管理', value: 'admin' },
        { label: '成员', value: 'member' },
      ],
    },
  },
  { prop: 'age', label: '年龄', width: 100, sortable: true, align: 'right' },
  { prop: 'city', label: '城市', minWidth: 120 },
]

const data = [
  { id: 1, name: '张三', role: 'admin', age: 28, city: '上海' },
  { id: 2, name: '李四', role: 'member', age: 22, city: '杭州' },
  { id: 3, name: '王五', role: 'member', age: 31, city: '北京' },
  { id: 4, name: '赵六', role: 'admin', age: 26, city: '深圳' },
]
</script>

<template>
  <DanTable :columns="columns" :data="data" border stripe />
</template>

多级表头

通过 columns[].children 嵌套分组；排序 / 筛选 / 列设置仅作用于叶子列。

ID	基本信息		任职
	姓名	年龄	角色	城市
1	张三	28	admin	上海
2	李四	22	member	杭州
3	王五	31	member	北京

<script setup>
import { DanTable } from '@dandan-ui/ui'

const columns = [
  { prop: 'id', label: 'ID', width: 64 },
  {
    label: '基本信息',
    children: [
      { prop: 'name', label: '姓名', minWidth: 100, filterable: true },
      { prop: 'age', label: '年龄', width: 88, sortable: true, align: 'right' },
    ],
  },
  {
    label: '任职',
    children: [
      {
        prop: 'role',
        label: '角色',
        width: 120,
        filterable: {
          type: 'select',
          options: [
            { label: '管理', value: 'admin' },
            { label: '成员', value: 'member' },
          ],
        },
      },
      { prop: 'city', label: '城市', minWidth: 100 },
    ],
  },
]

const data = [
  { id: 1, name: '张三', role: 'admin', age: 28, city: '上海' },
  { id: 2, name: '李四', role: 'member', age: 22, city: '杭州' },
  { id: 3, name: '王五', role: 'member', age: 31, city: '北京' },
]
</script>

<template>
  <DanTable :columns="columns" :data="data" border stripe />
</template>

树形数据

设置 tree，行数据通过 children（可用 treeChildren 自定义）嵌套；展开图标显示在第一列。

部门	负责人	人数
总部	张三	120
研发中心	李四	68
前端组	王五	18
后端组	赵六	26
市场部	钱七	32
华东分公司	孙八	45

<script setup>
import { DanTable } from '@dandan-ui/ui'

const columns = [
  { prop: 'name', label: '部门', minWidth: 180 },
  { prop: 'owner', label: '负责人', width: 100 },
  { prop: 'count', label: '人数', width: 88, align: 'right' },
]

const data = [
  {
    id: 1,
    name: '总部',
    owner: '张三',
    count: 120,
    children: [
      {
        id: 11,
        name: '研发中心',
        owner: '李四',
        count: 68,
        children: [
          { id: 111, name: '前端组', owner: '王五', count: 18 },
          { id: 112, name: '后端组', owner: '赵六', count: 26 },
        ],
      },
      { id: 12, name: '市场部', owner: '钱七', count: 32 },
    ],
  },
  { id: 2, name: '华东分公司', owner: '孙八', count: 45 },
]
</script>

<template>
  <DanTable :columns="columns" :data="data" tree default-expand-all border />
</template>

虚拟滚动

大数据量时开启 virtual，需提供容器 height 与定高 rowHeight（不支持动态行高）。

ID	名称	城市
1	用户 1	上海
2	用户 2	杭州
3	用户 3	北京
4	用户 4	深圳
5	用户 5	上海
6	用户 6	杭州
7	用户 7	北京
8	用户 8	深圳
9	用户 9	上海
10	用户 10	杭州
11	用户 11	北京
12	用户 12	深圳
13	用户 13	上海
14	用户 14	杭州
15	用户 15	北京
16	用户 16	深圳
17	用户 17	上海
18	用户 18	杭州

<script setup>
import { DanTable } from '@dandan-ui/ui'

const columns = [
  { prop: 'id', label: 'ID', width: 72 },
  { prop: 'name', label: '名称', minWidth: 140 },
  { prop: 'city', label: '城市', width: 100 },
]

const data = Array.from({ length: 1000 }, (_, i) => ({
  id: i + 1,
  name: `用户 ${i + 1}`,
  city: ['上海', '杭州', '北京', '深圳'][i % 4],
}))
</script>

<template>
  <DanTable
    :columns="columns"
    :data="data"
    virtual
    :height="320"
    :row-height="44"
    border
    stripe
  />
</template>

固定列

叶子列设置 fixed: 'left' | 'right'。建议同时给出 width，以便正确计算粘滞偏移。

姓名	部门	城市	邮箱	电话	操作
用户 1	研发	北京	user1@example.com	13800000000	编辑
用户 2	设计	上海	user2@example.com	13800000001	编辑
用户 3	研发	北京	user3@example.com	13800000002	编辑
用户 4	设计	上海	user4@example.com	13800000003	编辑
用户 5	研发	北京	user5@example.com	13800000004	编辑
用户 6	设计	上海	user6@example.com	13800000005	编辑
用户 7	研发	北京	user7@example.com	13800000006	编辑
用户 8	设计	上海	user8@example.com	13800000007	编辑

<script setup lang="ts">
const columns = [
  { prop: 'name', label: '姓名', width: 120, fixed: 'left' as const },
  { prop: 'dept', label: '部门', width: 140 },
  { prop: 'city', label: '城市', width: 140 },
  { prop: 'email', label: '邮箱', width: 220 },
  { prop: 'phone', label: '电话', width: 160 },
  { prop: 'action', label: '操作', width: 100, fixed: 'right' as const },
]

const data = Array.from({ length: 8 }, (_, i) => ({
  id: i + 1,
  name: `用户 ${i + 1}`,
  dept: i % 2 ? '设计' : '研发',
  city: i % 2 ? '上海' : '北京',
  email: `user${i + 1}@example.com`,
  phone: `1380000${String(i).padStart(4, '0')}`,
  action: '编辑',
}))
</script>

<template>
  <DanTable :columns="columns" :data="data" border />
</template>

行多选

开启 selection，可用 v-model:selected-row-keys 受控。树表场景仅对当前可见扁平行勾选。

已选：1

false	姓名	角色	年龄
false	张三	admin	28
false	李四	member	22
false	王五	member	31

<script setup lang="ts">
import { ref } from 'vue'

const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'role', label: '角色' },
  { prop: 'age', label: '年龄', sortable: true },
]

const data = [
  { id: 1, name: '张三', role: 'admin', age: 28 },
  { id: 2, name: '李四', role: 'member', age: 22 },
  { id: 3, name: '王五', role: 'member', age: 31 },
]

const selectedRowKeys = ref<(string | number)[]>([1])
</script>

<template>
  <div>
    <p style="margin-bottom: 8px">已选：{{ selectedRowKeys.join(', ') || '无' }}</p>
    <DanTable
      v-model:selected-row-keys="selectedRowKeys"
      selection
      :columns="columns"
      :data="data"
      border
    />
  </div>
</template>

展开行

expandable 提供内容展开列，与 tree 的节点展开分开；详情写在 #expand 插槽。

	姓名	角色
	张三	admin
	李四	member

<script setup lang="ts">
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'role', label: '角色' },
]

const data = [
  { id: 1, name: '张三', role: 'admin', detail: '负责权限与账号体系' },
  { id: 2, name: '李四', role: 'member', detail: '参与业务功能开发' },
]
</script>

<template>
  <DanTable expandable :columns="columns" :data="data" border>
    <template #expand="{ row }">
      <div>详情：{{ row.detail }}</div>
    </template>
  </DanTable>
</template>

合计行

show-summary 默认对 number 列求和；可用 summary-method 自定义。

商品	数量	金额
组件库订阅	2	199
设计资源包	1	89
咨询服务	3	450
合计	6	738

<script setup lang="ts">
const columns = [
  { prop: 'name', label: '商品' },
  { prop: 'qty', label: '数量', align: 'right' as const },
  { prop: 'amount', label: '金额', align: 'right' as const },
]

const data = [
  { id: 1, name: '组件库订阅', qty: 2, amount: 199 },
  { id: 2, name: '设计资源包', qty: 1, amount: 89 },
  { id: 3, name: '咨询服务', qty: 3, amount: 450 },
]
</script>

<template>
  <DanTable show-summary :columns="columns" :data="data" border />
</template>

Props

属性	说明	类型	默认值
data	行数据	TableRow[]	[]
columns	列配置	TableColumn[]	[]
rowKey	行键	string | (row, index) => string | number	'id'
border	边框	boolean	false
stripe	斑马纹	boolean	false
emptyText	空文案	string	'暂无数据'
showColumnSettings	列设置入口；默认有 hideable 列时显示	boolean	—
filters	受控筛选条件	TableFilters	—
visibleColumns	受控可见列 prop 列表	string[]	—
filterMode	local 本地过滤 / remote 只抛事件	'local' | 'remote'	'local'
tree	启用树形表格	boolean	false
treeChildren	子节点字段名	string	'children'
defaultExpandAll	默认展开全部	boolean	false
expandRowKeys	受控展开行 key	(string | number)[]	—
indent	树节点每级缩进（px）	number	16
virtual	启用虚拟滚动	boolean	false
height	虚拟滚动容器高度	number | string	400
rowHeight	虚拟行高（px）	number	48
virtualBuffer	视口外缓冲行数	number	5
selection	行多选	boolean	false
selectedRowKeys	受控选中行 key	(string | number)[]	—
reserveSelection	数据变更后保留选中（非受控）	boolean	false
expandable	内容展开行	boolean	false
expandedRowKeys	受控内容展开 key	(string | number)[]	—
showSummary	合计行	boolean	false
summaryMethod	自定义合计	( { columns, data } ) => Record<string, string>	—

TableColumn

字段	说明
prop / label	字段名（叶子列必填）/ 表头
children	多级表头子列；有 children 时为分组列
width / minWidth / align	尺寸与对齐
sortable	是否可排序（叶子列）
filterable	true 文本筛选，或 { type: 'text' | 'select', options? }（叶子列）
hideable	是否可在列设置中隐藏，默认 true（叶子列）
visible	初始是否显示，默认 true（叶子列）
fixed	固定列 'left' | 'right'（叶子列）

Events

事件	说明
update:filters / filter-change	筛选变化
update:visibleColumns / column-visibility-change	列显隐变化
sort-change	{ prop, order }
update:expandRowKeys / expand-change	树节点展开变化
update:selectedRowKeys / selection-change	多选变化；selection-change 参数 (keys, rows)
update:expandedRowKeys / expandable-change	内容展开行变化

Slots

插槽	说明
[prop]	自定义单元格，参数 { row, column, index }
expand	内容展开区，参数 { row, index }（需 expandable）