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) 插槽 ​