element-ui之el-table的二次封装,带条件查询及翻页功能

在很多前端的后管项目中会存在很多表格,表格数据过多就需要分页和按条件筛选搜索查询,于是就对el-table进行了二次封装。

页面结构如图:

element-ui之el-table的二次封装,带条件查询及翻页功能_第1张图片
PS:以前做的组件了,大家可以酌情参考,也可根据实际情况进行修改扩展。

1、首先创建一个 searchForm.vue 文件,放置筛选查询条件和按钮。



2、创建 searchTable.vue 文件



3、在组件中使用


 

你可能感兴趣的:(前端element-ui)