1、V-selectpage 服务器端使用
需要指定发请http请求的组件，如axios， 由于返回的格式不同，需要指定返回数据处理的函数。这两点是关键。
2、 Main.js
import vSelectPage from 'v-selectpage'
import axios from 'axios'
import { getToken } from '@/utils/auth'
Vue.use(vSelectPage, {
dataLoad: function(vue, url, params) {
const baseUrl = process.env.VUE_APP_BASE_API === '/' ? '' : process.env.VUE_APP_BASE_API
// console.log('dataLoad', vue, url, params)
return new Promise((resolve, reject) => {
params.currentPage = params.pageNumber
//params.pageSize = params.pageSize
params.supplier_category_id = 2
if(params.searchValue){
params.inputName = params.searchValue
}
axios.post(
url = baseUrl+url,
params,
{
headers: {
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': getToken()
}
}).then(resp => resolve(resp), resp => reject(resp))
})
}
})
3、 引入和使用组件
// html
<template>
<v-selectpage ref="factorySelect" data="/api/supplier/querySuppliers" @values="factoryValues" title="供应商" key-field="shortName" :resultFormat="factoryCommidRstFn" v-model="shortName" placeholder="请选择供应商" show-field="shortName" search-field="inputName" :tb-columns="factoryTbColumns" :multiple="true" style="display: flow-root;"/>
<!-- /api/supplier/querySuppliers后端给的接口 -->
</template>
<script>
import { SelectPage } from 'v-selectpage'
components: {
'v-selectpage': SelectPage
},
data() {
return {
factoryTbColumns: [
{ title: '编码', data: 'code' },
{ title: '简称', data: 'shortName' }
],
}
}，
methods: {
// 根据后端接口返回的数据而定
factoryCommidRstFn(res){
if(res.status!=200){
return
}
let obj={
totalRow: res.data.suppliersCount,
list: res.data.suppliers
}
return obj
},
factoryValues(data) {
if(data&&data.length!=0){
this.stageForm.code = String(data.map((e)=>e.code))
this.stageForm.sampleFactory = String(data.map((e)=>e.shortName))
this.shortName = String(data.map((e)=>e.shortName))
this.stageForm.shortName = String(data.map((e)=>e.shortName))
}
},
}
</script>
- image.png
注意： 多选模式时，样式会变形，加入样式：style="display: flow-root;"即可
- image.png
4、 回显： 关键是key-field和v-model绑定的字段保持一致
key-field="shortName"
v-model="shortName"
回显的值赋值给v-model绑定的字段，传参给后端params.inputName，后端处理以 , 隔开的字符串，返回内容进行修改
-
传参
企业微信截图_17138606463278.png -
接口返回
企业微信截图_17138606609823.png
这样就可以回显了
