1、封装组件
<!--
author: Hasan
date: 2022-11-19 16:45:56
使用方式：与官网一致
可表格中循环使用
<page-selects
:selectStyle="{ minWidth: '200px' }"
ref="pageSelect"
:placeholder="'请选择合作项目进行关联'"
:optionsInit="这里传列表所有数据"
:searchkey="'名称'"
:selectValueNow="{
key:row.识别key-----单选这种方式传回显,
label:row.name
}"
:selectValueNow="[{
key:row.识别ke-----多选这种方式传回显,
label:row.name
}]"
:inputVaueKey="'识别key'"
:treePageSize="50"
@selectChange="selectChange选择后返回的数据，用方法接收"
@selectChange="(selectValue)=>selectChange(index,selectValue)"
/>
-->
<template>
<div class="toselect_components">
<a-select
v-model="selectValue"
label-in-value
:placeholder="placeholder"
:filter-option="filterOption"
:disabled="disabled"
@change="selectChange"
@popupScroll="bandPopupScroll"
@search="search"
@blur="bandSelect"
show-search
:mode="mode"
:style="selectStyle"
allowClear
>
<a-select-option v-for="(item, index) in options" :key="index" :value="item[inputVaueKey]">{{
item[searchkey]
}}</a-select-option>
</a-select>
</div>
</template>
<script>
import { bandSearch, bandPopupScroll } from "@/utils/index.js";
export default {
props: {
placeholder: {
type: String,
default: "请选择"
},
selectStyle: {
type: Object,
default: () => {}
},
disabled: {
type: Boolean,
default: false
},
treePageSize: {
type: Number,
default: 50
},
inputVaueKey:{
type: String,
default: "id"
},
searchkey: {
type: String,
default: "name"
},
mode: {
type: String,
default: ""
},
optionsInit: {
type: Array,
default: ()=>{}
},
selectValueNow:{
type: Object,
default: ()=>{}
}
},
watch:{
optionsInit:{
handler(value){
this.options = value.slice(0, 50);
this.optionsAll = value;
this.searchAll = value;
},
immediate:true
},
selectValueNow:{
handler(value){
if(value.key){
this.selectValue = value;
}
},
immediate:true
}
},
data() {
return {
selectValue: undefined,
options: [],
optionsAll: [],
scrollPage: 1,
searchAll: [],
valueData: ""
};
},
methods: {
selectChange(value) {
if(!value){
this.$emit("selectChange", {
key:undefined,
label:undefined
});
}else{
this.$emit("selectChange", value);
}
},
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
);
},
bandSelect() {
this.options = this.optionsAll.slice(0, this.treePageSize);
this.valueData = "";
},
search(val) {
this.valueData = val;
if (!val) {
this.options = this.optionsAll.slice(0, 50);
this.searchAll = this.optionsAll;
} else {
let newData = bandSearch(val, this.optionsAll, this.searchkey, this.treePageSize);
this.scrollPage = 1;
this.options = newData.options;
this.searchAll = newData.optionsAll;
}
},
bandPopupScroll(e) {
let dataObj = bandPopupScroll(
e,
this.searchAll,
this.valueData,
this.scrollPage,
this.treePageSize
);
if (dataObj) {
if (dataObj.newData.length != 0) {
this.options = dataObj.newData;
}
this.scrollPage = dataObj.scrollPage;
}
}
}
};
</script>
2、引用并注册到页面
import PageSelects from './antVueComponents/pageSelects.vue'
3、使用
<page-selects
:selectStyle="{ minWidth: '200px' }"
ref="pageSelect"
:placeholder="'请选择合作项目进行关联'"
:optionsInit="这里传列表所有数据"
:searchkey="'名称'"
:selectValueNow="[{
key:row.识别ke-----多选这种方式传回显，具体查看组件说明,
label:row.name
}]"
:inputVaueKey="'识别key'"
:treePageSize="50"
@selectChange="selectChange选择后返回的数据，用方法接收"
/>
