在前端开发中，数据展示是一个很重要的环节，而 adonis-datagrid 就是一个方便快捷的数据表格展示组件。本文将介绍如何使用 adonis-datagrid 来实现数据的展示和筛选。
安装
安装 adonis-datagrid 的命令如下：
npm install adonis-datagrid
使用
1. 引入组件
在需要使用 adonis-datagrid 的页面中，将组件引入：
import AdonisDatagrid from 'adonis-datagrid'
2. 配置数据源
在引入组件后，需要配置数据源，以便展示数据。
-- -------------------- ---- -------
------ -
------ -
-------- -
-
------ -----
------ -----
--------- -----
--
-
------ -------
------ -------
--------- -----
--
-
------ --------
------ --------
--
-
------ -------- ----
------ -------------
--------- -----
--
--
---------------- -
------- ---
----- ---
------ ---
----- --
------ ---
--
------ ---
------ --
-
--在配置数据源时，需要定义 columns 列表和 userQueryParams 参数，其中 columns 定义页面需要展示的表头和字段相关信息，userQueryParams 定义用户查询的条件。
3. 渲染组件
在引入组件和配置数据源之后，可以在页面中使用组件，并将定义好的数据传入组件中。
<AdonisDatagrid :data-url="'/api/user'" :columns="columns" :query-params="userQueryParams" @load="loadUsers" />
在渲染组件时，需要传入数据的请求接口地址 data-url，table 的 columns 列表，以及用户查询的相关参数 query-params。并且在组件内部绑定事件 @load，用于触发 loadUsers 函数来加载数据。
4. 实现查询、排序和分页
在我们定义好了数据源和渲染组件之后，我们需要来实现一些基本的查询、排序和分页功能。
4.1 查询
在 adonis-datagrid 中，查询是通过在 userQueryParams 中的 search 参数来实现的。
search() {
this.userQueryParams.search = this.query
this.userQueryParams.page = 1
this.loadUsers()
},实现搜索功能后，我们还需要通过监听 input 事件来输入搜索关键字 query。
<input type="text" placeholder="Search" v-model="query" @input="search" />
4.2 排序
排序是指按照用户指定的字段数据排序，实现排序需要在组件中进行绑定，然后在 userQueryParams 中设置 sort 和 order 参数。
<th @click="sort('id')">ID</th>-- -------------------- ---- -------
------------- -
-- -------------------------- --- ------ -
-------------------------- - -------------------------- --- ------ - ----- - ------
- ---- -
------------------------- - -----
-------------------------- - -----
-
----------------
--在实现排序功能后，我们可以通过改变表格列头的 click 事件来触发 sortBy 函数来进行排序。
4.3 分页
adonis-datagrid 默认使用散装的分页，但是在实际使用中，我们通常需要使用更加美观的分页插件。下面是一个常见的分页插件的使用示例。
<data-pagination v-model="userQueryParams.page" :page-count="pageCount" />
通过在 adonis-datagrid 中使用 data-pagination 组件来实现分页的功能。
总结
至此，我们已经学习了如何使用 adonis-datagrid 组件来实现数据展示的任务，并通过一个简单的示例实现了组件的一些基本功能。在实际开发中，通过组合和扩展 adonis-datagrid 的功能，我们可以实现更加复杂的数据展示需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566ad81e8991b448e2e9f