vue后台之 简单的查询 + 分页

vue后台之 简单的查询 + 分页

• 思路：就是当上面的下拉菜单切换的时候，使用一个变量去接受这个当前切换的值，针对每一个下拉菜单的设置不同的变量，然后给查询的时候，设置一个对象，再点击查询的时候，把所有的变量，给当前对象的对象，一一赋值
• 注意项：
  • 1：点击查询的时候，需要针对分页设置为 第一页 && 当前要显示的 页数 为 10页等
  • 2：点击重置的时候，需要针对分页设置为 第一页 && 当前要显示的 页数 为 10页等
  • 3：点击查询后，查询到结构后，需要再初始化 table数据！

data数据的定义

      lntype:"", // 品种
      lnid:"", // 子品种
      lnamtStart:"", 
      lnamtEnd:"",
      // 查询成功的对象 
      searchSucObj:{},

查询的设置 && 重置

	// 初始化
    init() {
      this.initTable();
    },
    initTable(options){
      let options1 = Object.assign({},options,{
        pageNum: this.defaultValue.currentPage,
        pageSize: this.defaultValue.currentPageSize,
      })
      singleInit(options1).then(({data}) => {
        console.log('单笔的init', data);
        if(data.code == 0){
          this.tableData = data.dat.data;
          this.defaultValue.total = data.dat.count;
        }else{
          this.tableData = [];
          this.defaultValue.total = 0;
        }
      })
    },
    
    // 查询
    search(){
      this.searchSucObj = {
        lntype: this.lntype,
        lnid: this.lnid,
        lnamtStart: this.lnamtStart,
        lnamtEnd: this.lnamtEnd,
      }
      this.initTable(this.searchSucObj)
    },
    // 重置
    reset(){
      this.lntype = "";
      this.lnid = "";
      this.lnamtStart = "";
      this.lnamtEnd = "";
      this.curcd = "";
      this.searchSucObj = {};
      this.initTable({})
    },

singleInit 请求

import request from '@/utils/request'
import {isEmpty} from "@/utils/tool.js"

// 单笔业务的 分页表格
export function singleInit(options){
    let lntype = isEmpty(options.lntype)
    let lnid = isEmpty(options.lnid)
    let lnamtStart = isEmpty(options.lnamtStart)
    let lnamtEnd = isEmpty(options.lnamtEnd)
    let pageNum = isEmpty(options.pageNum)
    let pageSize = isEmpty(options.pageSize)
    return request({
        url:'/XXX',
        method:'get',
        params:{
          lntype,
          lnid,
          lnamtStart,
          lnamtEnd,
          pageNum,
          pageSize
        }
    })
}

查询踩坑2

• 当你在角色名称之中，输入内容的时候，这个时候使用v-model的方式绑定的，
• 问题：
  • 当你输入角色名称的时候，点击查询了，会请求数据！
  • 假如你点击了下一页 或者 上一页 或者 新增编辑等，然后在修改的角色名称，却点击查询，由于是v-model绑定方式，因此会使用查询的修改后的角色名称，因此不符合实际，造成一个bug
• 解决方式：
  • 当你输入角色名称的时候，点击查询了，会请求数据！，并且在点击查询的时候，使用另外一个变量去接受，当前查询的角色名称(假设为 reRoleName)
  • 然后在使用下一页或者 上一页 或者 新增 等，使用的是当前查询的角色名称reRoleName，这样就可以解决这个数据双向绑定的影响问题！