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>

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

TableColumn

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

Events

事件	说明
update:filters / filter-change	筛选变化
update:visibleColumns / column-visibility-change	列显隐变化
sort-change	{ prop, order }
update:expandRowKeys / expand-change	树节点展开变化

Slots

插槽	说明
[prop]	自定义单元格，参数 { row, column, index }