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选择后返回的数据，用方法接收"
  />