当前位置: 首页 > 网络应用技术

基于ElementUI分页的第二包装的详细说明

时间:2023-03-05 19:47:41 网络应用技术

  通常,在背景管理项目中,将有更多的位置显示页面函数的数据显示,但是表,分页和条件检索是必不可少的。如果代码是副本,则不是很技术性。

  每个项目的UI设计师都有自己的想法。

  根据我们直率的男人的想法,UI组件的颜色风格不好?您不需要设计它,我不需要改变风格,香气?

  但是,我们还必须尊重他人的结果。当设计样式和UI框架提供的样式或布局不同时,有必要手动意识到它

  另一点是,如果您需要更改某些内容,如果您的分页确实是副本,那么恭喜,其中一些已更改。

  基于上述原因,元素的分页部分的第二包装是诞生的。

  在分页组件中,我们只需要注意三个地方

  显然,默认当前页面必须是第一页,

  每个页面显示多少数据,这要求用户自己定义它。如果用户不选择,我们将提供默认值

  总共多少页,您需要查看后台返回的数据总数。除了每个页面显示的数据量,这只是说话。

  根据Elementui的分页,我们可以以这种方式定义我们的分页组件代码:

  这是为了通过构建的组件插槽来定义某些个人样式显示效果,然后我们定义了脚本中subcrids所需的参数。这里需要两个参数

  计数来自接口API返回的总数据,而PAGESIZE是我定义的每个页面显示的数据量。用户可以自己设置。默认值是显示10个数据。

  然后使用计算属性来计算总计多少页

  同时,我们需要定义当前默认页面号码

  最后定义页面转动事件。此事件是由用户单击特定页码或上一页的按钮触发的

  因为我们使用修饰符绑定,所以此属性将在更新后自动接收值,因此我们不需要做任何分配值的事情。

  在事件中,通过此方法,我们将当前的跳页编号传递给父组件以获取更新的数据

  这样,一个子组件就完成了。

  让我们看看如何在父组件中使用它。

  

  在多个父组件中,我们可以以相同的方式介绍注册和使用。

  如果需要以后更改,我们可以直接更改/components/page/index.vue,而无需将其修改一次。

  朋友有更好的想法,欢迎在评论中留言?

  作者:阳光同学