通常,在背景管理项目中,将有更多的位置显示页面函数的数据显示,但是表,分页和条件检索是必不可少的。如果代码是副本,则不是很技术性。
每个项目的UI设计师都有自己的想法。
根据我们直率的男人的想法,UI组件的颜色风格不好?您不需要设计它,我不需要改变风格,香气?
但是,我们还必须尊重他人的结果。当设计样式和UI框架提供的样式或布局不同时,有必要手动意识到它
另一点是,如果您需要更改某些内容,如果您的分页确实是副本,那么恭喜,其中一些已更改。
基于上述原因,元素的分页部分的第二包装是诞生的。
在分页组件中,我们只需要注意三个地方
显然,默认当前页面必须是第一页,
每个页面显示多少数据,这要求用户自己定义它。如果用户不选择,我们将提供默认值
总共多少页,您需要查看后台返回的数据总数。除了每个页面显示的数据量,这只是说话。
根据Elementui的分页,我们可以以这种方式定义我们的分页组件代码:
这是为了通过构建的组件插槽来定义某些个人样式显示效果,然后我们定义了脚本中subcrids所需的参数。这里需要两个参数
计数来自接口API返回的总数据,而PAGESIZE是我定义的每个页面显示的数据量。用户可以自己设置。默认值是显示10个数据。
然后使用计算属性来计算总计多少页
同时,我们需要定义当前默认页面号码
最后定义页面转动事件。此事件是由用户单击特定页码或上一页的按钮触发的
因为我们使用修饰符绑定,所以此属性将在更新后自动接收值,因此我们不需要做任何分配值的事情。
在事件中,通过此方法,我们将当前的跳页编号传递给父组件以获取更新的数据
这样,一个子组件就完成了。
让我们看看如何在父组件中使用它。
在多个父组件中,我们可以以相同的方式介绍注册和使用。
如果需要以后更改,我们可以直接更改/components/page/index.vue,而无需将其修改一次。
朋友有更好的想法,欢迎在评论中留言?
作者:阳光同学