Element UI表格和分页以及搜索条件的合成组件(1)

在一些表格统计页面当中经常会遇到需要表格、分页、一般还会有搜索条件等组成

Element UI表格和分页以及搜索条件的合成组件(1)_第1张图片

像这样, 当然有时候搜索条件会有很多个输入框、下拉框、时间轴...可以写成表单(用动态组件封装一下),这里是模糊搜索

回到正题

先看一下组件顶层:

这里分成两个组件:

一个是搜索,之前是n个输入框、下拉框、时间区间...的那种用动态组件封装的一个表单(后文会有记录),后来改成模糊搜索。

另外一个是分页和表格组合的组件,大部分情况下可能没有搜索,但是分页和表格大部分情况是搁在一起的。

这里记录一下实现思路:

seachList组件中主要是:一些动态组件的配置信息以及搜索事件

tableList组件中主要是:表格的配置信息、表格数据、还有搜索事件

会触发搜索的条件包括:seachList组件中的条件、tableList组件中的分页信息(也会有其他的条件)

将这些条件传入搜索事件中,做好保存和删除的工作(比如:seachList搜索个abc,然后又点个下一页,这就要保存搜索条件,而如果有个路由也是用的这个组件就需要删除条件),总之这里看情况而定

下面是seachList组件中动态组件的实现

 

你可能感兴趣的:(随笔&笔记)