前言

TinyVue 的 Grid 组件是公司级后台中最常用的数据展示组件之一。不过，在处理大量数据时直接一次性加载所有数据会导致页面卡顿、网络压力增大。主要痛点如何实现高效的远程分页、排序、筛选，并在数据变更后及时刷新表格？

TinyVue Grid 提供了两种上述痛点。

基础概念

TinyVue Grid 基于 封装，在保留原生能力的同时提供了简化的 fetchData API。fetchData 是对 vxe-table proxy-config.ajax.query 的高层封装，让你以 Vue 风格编写远程请求。不过，

一、最简示例：自动加载数据

只需配置 :fetch-data="{ api: getData }"Grid 会在挂载时自动调用该方法加载数据。

返回数据结构要求：

{
再看result。Array,// 当前页数据
至于page，{ total: number } // 总记录数
}

二、禁用自动加载：auto-load

If you need to load data only after certain conditions,set :auto-load="false". Then manually trigger loading:

this.$refs.grid.handleFetch

三、分页加载

The most common remote‑data scenario is pagination. Configure a pager via :pager="pagerConfig";fetch method automatically receives pagination parameters.

pagerConfig 配置详解

属性	类型	说明
component	Component	Pager组件。推荐使用 TinyPager
attrs.*
.currentPage	Number	当前页码，默认 1
.pageSize	Number	每页条数，默认 10
.pageSizes	Number	可选每页条数列表，如
.total	Number	Total record count returned by backend
.layout	Pager布局，可组合：total / sizes / prev / pager / next / jumper

四、排序与预排序

初始排序——首次渲染即带有默认排序规则。

javascript data { return{ prefetchArgs:。fetchData:{api:this.getDa ta} } },methods:{ getDa ta{ const curPage=page.currentPage; const size=page.pageSize;return new Promise(resolve=>{ fetch .n) .n) }) } }

动态排序——点击列头后自动触发刷新。其实，

The sorting info is passed via { sortBy } parameter of your API method.

五、数据筛选——常见痛点：筛选后表格不刷新或条件未生效。

You can modify this.fetchD ata.args at runtime and n manually call handleFetch.

import {TinyG rid,Tin yGr idColumn,Tin yPager。Tin yButto n} from '@openti ny/vue'

export default{ components:{TinyG rid,Tin yGridColumn,Tin yButton},data{ return{ pagerCon fig:{component:T inyPa ger,…},fetchDat a:{api:this.ge tD ata} } }。methods:{ getD ata{ const cur=pa ge.currentPage;const size=pa ge.pageSize;const params={page:c ur,pageSize:size};ifparams.area=filterArgs;

return fetch}`) .n) .n) },filterDa ta{ this.fetchDat a.args={filterArgs:a rea};this.$refs.grid.handleFetch } } } <&scrip t>

• Dynamically assign filter arguments via this.fetchDa ta.args.
• manual call this.$refs.grid.handleF etchto reload.
• The API receives those args and builds request parameters accordingly.
/ul>

sortBy

参数	类型	说明
page	Object	分页信息，包括 currentPage 与 pageSize
page.currentPage	Number	当前页码
page.pageSize	Number	每页条数
filterArgs	any ，	筛选条件，可自定义字段名
Object/Array	当前排序信息

​​

​​​

​

​ ​​​

​ ​

h

h

h

h

h

h

...

NOTE: The assistant's final answer appears incomplete due to an error in rendering tables and code blocks.

。

---