基础表格

基础表格示例展示了 antdv-next-pro ProTable 的基本使用。

表格的基本使用

1. 定义表格行数据类型（可选）
2. 使用 useTable hook 创建 table 对象，配置 columns 和 searchFields
3. 定义数据获取方法 search（更新 dataSource 和 pageParam.total）
4. 向 ProTable 传入 table 对象和 search 方法

表格展示

姓名

年龄

性别

请选择

生日

序号	姓名	年龄	性别	生日	家庭住址
No data

代码实现

<script lang="ts" setup>
import { Card } from 'antdv-next';
import { ProTable, useTable } from '@qin-ui/antdv-next-pro';
import { useData } from 'vitepress';
const { isDark } = useData();

// 1. 定义表格行数据类型（可选）
type Row = {
  name: string;
  age: number;
  gender: string;
  birthday: string;
  address: string;
};

// 2. 使用useTable hook创建table对象
const table = useTable<Row>({
  searchFields: [
    { label: '姓名', path: 'name', component: 'input' },
    { label: '年龄', path: 'age', component: 'input-number' },
    { label: '性别', path: 'gender', component: 'select' },
    { label: '生日', path: 'birthday', component: 'range-picker' },
  ],
  columns: [
    { title: '姓名', dataIndex: 'name' },
    { title: '年龄', dataIndex: 'age' },
    { title: '性别', dataIndex: 'gender' },
    { title: '生日', dataIndex: 'birthday' },
    { title: '家庭住址', dataIndex: 'address' },
  ],
});

const total = 888;
const mockListData = new Array(total).fill(null).map((_, index) => ({
  name: `张三${index}`,
  age: index,
  gender: index % 2 === 0 ? '男' : '女',
  birthday: '2023-01-01',
  address: '上海',
}));

// 3. 定义数据获取方法 search
const search = async () => {
  const { current, pageSize } = table.pageParam;
  return new Promise<void>(resolve => {
    setTimeout(() => {
      const list = mockListData.slice(
        (current - 1) * pageSize,
        current * pageSize
      );
      table.dataSource.value = list;
      table.setPageParam({ total: total });
      resolve();
    }, 600);
  });
};
</script>

<template>
  <Card
    class="pro-table-demo"
    :styles="{ body: { background: isDark ? '#141414' : '#f7f8f9' } }"
  >
    <!-- 4. 向ProTable传入table对象和search方法 -->
    <ProTable :table="table" :search="search" class="pro-table" />
  </Card>
</template>

<style scoped lang="less">
.vp-doc .pro-table-demo {
  :deep(.pro-table) {
    table {
      display: table;
      margin: 0;
      overflow-x: initial;

      tr {
        background-color: initial;
        border-top: initial;
        transition: initial;
      }

      th,
      td {
        border: initial;
      }
    }
  }
}
</style>