import React, { useState, useEffect } from "react"; import { Table, Card, Layout } from "@tencent/tea-component"; const { Body, Content } = Layout; const { pageable, autotip, scrollable } = Table.addons; function TableLayoutExample() { const [total, setTotal] = useState(0); const [records, setRecords] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { fetch(); }, []); async function fetch({ pageIndex = 1, pageSize = 10 } = {}) { setLoading(true); setRecords([]); const { records, total } = await new Promise(resolve => { setTimeout( () => resolve({ records: Array(pageSize) .fill(null) .map((_, i) => ({ id: (pageIndex - 1) * pageSize + i + 1, content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", })), total: 200, }), 1500 ); }); setTotal(total); setRecords(records); setLoading(false); } return ( fetch(query), }), autotip({ isLoading: loading, }), scrollable({ maxHeight: 480, minHeight: 480 }), ]} /> ); } export default function Demo() { return (

); }