Table 表格

介绍

用于展示多条结构类似的数据。

基础用法

通过 data 属性来设置表格数据，通过 columns 属性来设置表格列。

<vd-table :data="data" :columns="columns" />

import { TableColumn } from 'vital-design';

const data = ref([
  { name: '张三', date: '2025-06-01', address: '测试地址' },
  { name: '李四', date: '2025-06-01', address: '测试地址' },
  { name: '王五', date: '2025-06-01', address: '测试地址' },
]);

const columns = ref<TableColumn[]>([
  { prop: 'name', label: '姓名' },
  { prop: 'date', label: '日期' },
  { prop: 'address', label: '地址' },
]);

展示边框

通过 border 属性来展示边框。

<vd-table :data="data" :columns="columns" :border="true" />

展示斑马纹

通过 striped 属性来展示斑马纹。

<vd-table :data="data" :columns="columns" :striped="true" />

展示加载中

通过 loading 属性来展示加载中状态。

<vd-table :data="data" :columns="columns" :loading="true" />

允许行点击

通过 row-clickable 属性来允许行点击。

<vd-table :data="data" :columns="columns" :row-clickable="true" />

固定列

配置表格列时，通过 fixed 属性来固定列，支持 left、right 固定列。

<vd-table :data="data" :columns="columns" />

import { TableColumn } from 'vital-design';

const data = ref([
  { name: '张三', date: '2025-06-01', address: '测试地址' },
  { name: '李四', date: '2025-06-01', address: '测试地址' },
  { name: '王五', date: '2025-06-01', address: '测试地址' },
]);

const columns = ref<TableColumn[]>([
  { type: 'index', label: '序号', width: 70, fixed: 'left' },
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'date', label: '日期', width: 160 },
  { prop: 'address', label: '地址', width: 220 },
]);

使用单元格插槽

配置表格列时，可使用 th、td 插槽来自定义表头/表格单元格。

<vd-table :data="data" :columns="columns">
  <template #td="{ column, row, value }">
    <vd-button
      v-if="column.name === 'action'"
      :link="true"
      type="primary"
    >详情</vd-button>
    <template v-else>{{ value }}</template>
  </template>
</vd-table>

import { TableColumn } from 'vital-design';

const data = ref([
  { name: '张三', date: '2025-06-01', address: '测试地址' },
  { name: '李四', date: '2025-06-01', address: '测试地址' },
  { name: '王五', date: '2025-06-01', address: '测试地址' },
]);

const columns = ref<TableColumn[]>([
  { type: 'index', label: '序号', width: 70, fixed: 'left' },
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'date', label: '日期', width: 160 },
  { prop: 'address', label: '地址', width: 220 },
  { name: 'action', label: '操作', width: 80, fixed: 'right' },
]);

列排序

配置表格列时，通过 sortable 属性来配置列排序，支持 sort-method 方法来定义自定义排序。

<vd-table :data="data" :columns="columns" />

import { TableColumn } from 'vital-design';

const data = ref([
  { id: 3, name: '张三', date: '2025-06-01', address: '测试地址' },
  { id: 4, name: '李四', date: '2025-06-02', address: '测试地址' },
  { id: 5, name: '王五', date: '2025-06-03', address: '测试地址' },
]);

const columns = ref<TableColumn[]>([
  {
    type: 'index',
    label: '序号',
    width: 70,
    fixed: 'left',
    sortable: true,
  },
  {
    prop: 'name',
    label: '姓名',
    width: 120,
    sortable: true,
    sortOrder: 'asc',
    sortMethod: (type, a, b) => {
      const aName = a.row.name;
      const bName = b.row.name;

      // 根据中文拼音排序
      return type === 'desc' ? bName.localeCompare(aName, 'zh-CN') : aName.localeCompare(bName, 'zh-CN');
    }
  },
  {
    prop: 'date',
    label: '日期',
    width: 160,
    sortable: true,
    sortMethod: (type, a, b) => {
      const aVal = dayjs(a.value).valueOf();
      const bVal = dayjs(b.value).valueOf();

      // 根据时间戳排序
      return type === 'desc' ? bVal - aVal : aVal - bVal;
    }
  },
  { prop: 'address', label: '地址', width: 220 },
]);

API

Props

参数	说明	类型	默认值
data	表格数据	any[]	-
columns	表格列配置	TableColumn[]	-
height	表格高度	string | number	-
max-height	表格最大高度	string | number	-
index	序号的初始下标，0 -> 1、10 -> 11	number	0
loading	是否展示加载中	boolean	false
loading-type	加载中类型，同 loading 组件加载类型	LoadingType	'spinner'
border	是否展示表格线	boolean	false
stripe	是否展示斑马纹	boolean	false
shadow	有固定列时，是否展示滚动阴影	boolean	true
row-class	表格行类名，支持函数	TableColumnRowClass	-
row-style	表格行样式，支持函数	TableColumnRowStyle	-
row-clickable	表格行是否开启点击反馈，支持函数	TableColumnRowClickable	false
before-sort-change	排序切换前的回调函数，支持 Promise	TableBeforeSortChange	-

TableColumn

参数	说明	类型	默认值
type	类型，可选值为 text、index	TableColumnType	'text'
name	列标识名称	string	-
prop	列数据对象	string	-
label	列标题	string	-
width	列宽度	string | number	-
fixed	列固定位置，可选值为 left、right	TableColumnFixed	-
align	列对齐方式，可选值为 left、center、right	TableColumnAlign	'left'
sortable	是否可排序	boolean	false
sort-order	排序初始状态，可选值为 asc、desc	TableColumnSortOrder	-
sort-method	自定义排序方法	TableColumnSortMethod	-
th-class	表头列类名	ClassValue	-
th-style	表头列样式	StyleValue	-
td-class	表格体列类名	ClassValue	-
td-style	表格体列样式	StyleValue	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
click-row	行点击时触发	TableOnClickRowEvent

Slots

名称	说明
th	表头单元格
td	表格单元格
loading	加载中