Skip to content

介绍


本文档主要用于描述 ShadcnDataTable 组件的一些功能和用法。

用法

查看代码
vue
<template>
    <ShadcnDataTable :columns="columns" :data="data">
    </ShadcnDataTable>
</template>

尺寸 (size)

查看代码
vue
<template>
  <div class="space-y-4">
    <div>
      <ShadcnDivider orientation="left">小尺寸</ShadcnDivider>
      <ShadcnDataTable :columns="columns"
                       :data="data"
                       size="small">
      </ShadcnDataTable>
    </div>
    <div>
      <ShadcnDivider orientation="left">默认尺寸</ShadcnDivider>
      <ShadcnDataTable :columns="columns" :data="data">
      </ShadcnDataTable>
    </div>
    <div>
      <ShadcnDivider orientation="left">大尺寸</ShadcnDivider>
      <ShadcnDataTable :columns="columns"
                       :data="data"
                       size="large">
      </ShadcnDataTable>
    </div>
  </div>
</template>

高度 (height)

宽度 (width)

分页 (pagination)

加载中 (loading)

空数据 (empty)

右键菜单 (contextMenu)

行选择 (selection)

列移动 (move)

列排序 (sort)

列省略 (ellipsis)

列宽度 (width)

列提示 (tooltip)

列对齐方式 (align)

列宽度调整 (resizable)

列编辑 (editable)

数据表格 (Data Table) 属性



数据表格 (Data Table) 事件

数据表格 (Data Table) 插槽