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

目录

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

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

• 思路：就是当上面的下拉菜单切换的时候，使用一个变量去接受这个当前切换的值，针对每一个下拉菜单的设置不同的变量，然后给查询的时候，设置一个对象，再点击查询的时候，把所有的变量，给当前对象的对象，一一赋值

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
        }
    })
}