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:[{},{}]

      }