数据列表功能页

GraceVueAdmin 为您提供了数据列表功能页基础模板,实现了数据列表展示、分页、搜索、功能按钮等常用的布局,以此模板为基础可以快速地实现数据列表页面开发。

基础结构

此文档内容需登录 + 付费后才能查看!

通过头部插槽实现 : 页面功能名称展示、添加、刷新等按钮布局。

通过主体插槽实现 : 搜索、排序功能、数据列表展示功能、数据删除、编辑功能。

通过底部插槽实现 : 分页展示功能。

完整示例

此页面完整代码请参考下载框架获得的源码的任意列表页,如 : 文章列表、会员列表。

重要说明

1. 关于 commonList.js

通过源码可以看到我们以组件形式实现了数据列表页,组件结构声明时使用了 mixins:[commonList],commonList 可以帮我们实现很多基础功能( 适用于列表展示页面 ),下面为您一一介绍 :

1.1 声明基础变量

commonList.js 内声明了以下基础变量 :

此文档内容需登录 + 付费后才能查看!

您可以直接使用或修改它们( this.变量名称 ),也可以通过在页面上再次声明来覆盖它们。

1.2 内置方法

commonList.js 内声明了以下方法 :

此文档内容需登录 + 付费后才能查看!

这些方法会更便于您开发列表页,您同样可以通过再次声明的方式重新定义这些内置函数;

1.3 getTotal() 和 getData() 函数

请将您的核心数据读取函数声明为 getData(),将数据总数获取函数定义为 getTotal() ,组件默认会调用这2个函数进行数据的读取、刷新工作。

其他功能

框架源码还演示了搜索功能,同时提供了添加、编辑、查看详情等功能按钮,请根据您的时间需求再结合后面的模板,快速实现更多功能开发。

总结

基于 commonList 可以很方便的完成一些基础工作,如果您不愿意以此为基础,那么自己从零开始开发一个列表页码也是可以的,此页面可以作为一个非常不错的参考。