52 lines
2.1 KiB
TypeScript
52 lines
2.1 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { api } from '@nice/client';
|
|
|
|
function People() {
|
|
// 使用 useQuery 钩子从 API 获取数据，限制查询结果数量为 10
|
|
const { data } = api.staff.findMany.useQuery({
|
|
take: 10, // 限制查询结果数量
|
|
});
|
|
// 当 data 发生变化时，打印数据到控制台
|
|
useEffect(() => {
|
|
console.log(data);
|
|
}, [data]);
|
|
|
|
return (
|
|
<div>
|
|
{
|
|
// 遍历 data 并渲染每个元素
|
|
data?.map((i) => {
|
|
return (
|
|
<table className='table-auto w-full'>
|
|
<thead>
|
|
<tr>
|
|
<th className='px-4 py-2'>Username</th>
|
|
<th className='px-4 py-2'>ID</th>
|
|
<th className='px-4 py-2'>Showname</th>
|
|
<th className='px-4 py-2'>Password</th>
|
|
<th className='px-4 py-2'>Phone Number</th>
|
|
<th className='px-4 py-2'>Order</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data?.map((i) => (
|
|
<tr key={i.id} className='hover:bg-gray-100'>
|
|
<td className='border px-4 py-2'>{i.username}</td>
|
|
<td className='border px-4 py-2'>{i.id}</td>
|
|
<td className='border px-4 py-2'>{i.showname}</td>
|
|
<td className='border px-4 py-2'>{i.password}</td>
|
|
<td className='border px-4 py-2'>{i.phoneNumber}</td>
|
|
<td className='border px-4 py-2'>{i.order}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default People;
|