VUE项目后台管理系统--vue+elementUI组件table实现前端分页功能+前端模糊查询功能

        前端后台管理会存在很多表格，表格数据过多就需要分页，前端交互每次搜索如果都请求服务器会加大服务器的压力，所以在数据量不是很大的情况下可以一次性将数据返回，前端做检索。

---

效果

---

一、查询条件

代码如下（示例）：

   
     
       
        
        
      
         
           
            
          
       
       
          
            
          
       
       
         查询
        
    

二、页面展示

（1）分页展示

@size-change的属性：绑定当前页数量的事件，当前页数量变化时，触发SizeChange方法@current-change的属性：改变当前页时会触发事件
:current-page 的属性：绑定当前第几页
:page-size 的属性：绑定当前有几条数据
:total=“total” 这个是绑定一个变量保存数量总数

（2）表格数据

（3）绑定以上的变量：

export default {
  data() {
    return {
        formQuery: {
           routeName: "",
           deptId: "",
           routeType: "",
        },
        tableData: [],
        current: 1, // 当前页码
        total: 0,
        pageSize: 10,  // 每页显示多少条
        isClickSearch: false, // 当点击搜索时 对底部分页进行判断
      }
   }
}

（4）此处是条件查询的数据：

// 表格查询
queryBtn() {
  this.isClickSearch = true; // 当点击搜索时 对底部分页进行判断
  const formQuery = this.formQuery;
   if (!formQuery.routeName) delete formQuery.routeName;
   if (!formQuery.deptId) delete formQuery.deptId;
   if (formQuery.routeType === 0 || formQuery.routeType === 1) {
        formQuery.routeType = parseInt(formQuery.routeType);
      } else {
        delete formQuery.routeType;
      }
   this.current = 1;
   this.getRouteBySearch(this.current, this.pageSize, this.formQuery);
},

（5）此处是分页的绑定事件的处理：（此处省略表格数据的对接）

//改变多少条
handleSizeChange(pageIndex) {
 this.current = 1;
  this.pageSize = pageIndex;
  if (this.isClickSearch) {
     this.getRouteBySearch(this.current, this.pageSize, this.formQuery);//此处走查询接口
   } else {
    this.getList(this.current, this.pageSize);//此处走表格初始化的接口
      }
    },

// 底部分页功能
handleCurrentChange(pageIndex) {
 this.current = pageIndex;
  if (this.isClickSearch) {
   this.getRouteBySearch(this.current, this.pageSize, this.formQuery);//此处走查询接口
    } else {
    this.getList(pageIndex, this.pageSize);//此处走表格初始化的接口
    }
 },

---

总结

大家有什么疑问，可以留言哈。

感谢大家的观看~