脚本宝典收集整理的这篇文章主要介绍了

vue做后台管理系统,记住列表的查询条件和分页

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

需求:后台管理系统列表,带查询条件和分页,点编辑,新页面打开,保存之后再跳转回之前的页面。
(如果是表单字段少,强烈建议dialog修改。请忽略本文)

实现思路:

  1. store存储一个map,这个map的键是列表页面的path(也就是路由),值是查询条件和分页页码(等等根据条件自己定义);
  2. 列表页面created()的时候,读取sotre的map
  3. 列表页面的数据查询之前(也就是条件变化的时候),存储到store的map

我个人认为还是很方便的,优点有2个:一是如果需要记录列表的页面,添加4行代码就OK了;二是通用,不需要再额外定制参数

下面进入正题:

1、 store添加一个state

listPagePars:new Map(),

2、muntations添加

SAVE_LIST_PAGE_PARS: (state,{ path,pars }) => {
    state.listPagePars.set(path,pars);
},

3、 actions添加

saveListPagePars: ({ commit },{path,pars}) => {
    commit('SAVE_LIST_PAGE_PARS',{ path,pars });
},

4、 经过上面3个步骤是store的部分,代码都很少,浅显易懂,然后是使用的地方(需要记录查询条件和页码的vue页面才用)

data() {
  return{
    pars: {//核心的,列表页面的统一参数,建议整个后台管理系统的列表页都统一这种格式
      filter: {
        customer_name:'',//查询条件,有多少写多少
        mobile:''
      },
      page:1,
      page_size:15,
      order_field:'customer_id', //排序字段
      order_type:'desc', //排序方式
},

// ……

}

5、 列表查询的时候,如methods里面有个

getCustomers() {
  this.$store.dispatch('saveListPagePars',{path:this.$route.path,pars:this.pars});  //核心,每次查询条件变化,都先存一次
  // 后面是自己的ajax查询方法,
  // this.$http.get(API_URL.customer_list,{params:this.pars }).then((res) => {
  // ……
  // });

6、 列表页面初始化
说明:如果store存储了当前path的参数,就用该path的参数覆盖当前页面的默认参数,再查询

created() {
  if(this.$store.state.listPagePars.has(this.$route.path)) {
    this.pars=this.$store.state.listPagePars.get(this.$route.path);
  }
  this.getCustomers();
},

完毕,代码量很少,需要注意的是列表的查询表单,统一用你定义好的pars这种格式,有个好处是,查询的ajax也需要pars参数,比较统一。

总结

以上是脚本宝典为你收集整理的

vue做后台管理系统,记住列表的查询条件和分页

全部内容,希望文章能够帮你解决

vue做后台管理系统,记住列表的查询条件和分页

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过