v-selectPage 分页组件 服务端使用 关键摘要

1  V-selectpage

这是一个带分页的可搜索的下拉框组件，可显示多列

1.1 服务器端使用

需要指定发请http请求的组件，如axios， 由于返回的格式不同，需要指定返回数据处理的函数。这两点是关键。

1.1.1 Main.js

1.1.1.1 引入http请求组件

import { getAction} from '@/api/manage'　

说明：  getAction 是对axios进行多次封装的函数。注意：这里有个坑，一定要用大括号，如查不用 不会把getAction当成函数，而是当成对象。

在manager中定义样子：

//get
export function getAction(url,parameter) {
  return axios({
    url: url,
    method: 'get',
    params: parameter
  })
}
//post
export function postAction(url,parameter) {
  return axios({
    url: url,
    method:'post' ,
    data: parameter
  })
}

 

 

其中axios  不是开源的那个，是对令牌之类的进行封装的了，仅仅是名字重命名为axios

 

 

1.1.1.2 定义 v-selectpage插件

也是写在在main.js中。 注意：一定要有“Vue.prototype.getAction=getAction”，

原因是这里指定的 dataLoad函数，是回调函数这。执行该函数时，运行环境是v-select组件环境，不是main.js环境。如果不指定getAction为全局函数，v-select下不识别getAction.

  import vSelectPage from 'v-selectpage';

Vue.prototype.getAction=getAction

Vue.use(vSelectPage,{

  dataLoad: function(vue, url, params){

    console.log("dataLoad")

    return new Promise((resolve, reject)=> {

      vue.getAction(url,params).then(res=>{

        resolve(res)

      },e=>reject(e))

    })

  }

})

 

其中：vue形参是 v-selectpage组件自身；url是 v-selectpage使用时data属性指定的后台请求url, params是请求参数：

pageNumber,pageSize 及搜索参数。搜索参数属性名，由v-selectpage的search-field属性指定。

 

1.1.1.3 页面中使用组件

vue模板代码：

<v-selectpage ref="commoditySelect"

                              data="/logs/slLogisticsRules/getCommodity"

                              :multiple="true"

                              title="商品sku列表"

                              key-field="commodity_code"

                              :resultFormat="commidRstFn"

                              v-model="frm.commoditySku"

                              placeholder="请选择商品sku"

                              show-field="commodity_code"

                              search-field="commodity_code"

                              :tb-columns="commodityCols"

                              class="form-control">

                </v-selectpage>

 

 

摘抄 commidRstFn函数：

commidRstFn(res){

      console.log('commidRstFn')

      if(res.code!=200){

        console.info("商品下拉选择数据加载为空")

        return

      }

      let obj={

        totalRow:res.result.length,

        list:res.result

      }

      return obj

 

    },

 

其中;res,是执行getAction成功时返回值。  

V-pagesize具体需要的的 格式是 必须有totalRow行，与 数组的列表值名为list

 let obj={

        totalRow: 123,

        list:[{},{}]

      }