vue + elemen可远程搜索select选择器的封装（思路及源码分享）

Posted 2023-02-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue + elemen可远程搜索select选择器的封装（思路及源码分享）相关的知识，希望对你有一定的参考价值。

项目场景：

我一开始是先在网上找这方面的文章发现目前的文章都不太适合我的需求，于是自己想办法封装了一个，在这里分享一下思路及代码。

1.封装下拉列表

创建RangeSearch.vue

<!-- 
  component:远程搜索下拉列表
  time:2022/12/15

  1.placeholder(默认为空数组):占位符
  示例：
    :placeholder="Please_enter_customer_ID"
  2.SelectData(必传)：下拉框数据
    此处有有一个重要逻辑，原本这个数据是子组件接收源数据在进行处理，但是这样子无法自适应各种数据的字段，所以使用父组件去进行处理，处理完成在传给子组件
  示例：
    :SelectData="CustomerIDData"
    this.CustomerIDData = CustomerID.data.map((item) => 
      return value : item.CustomerID.toString() , label : item.CustomerID.toString()
    )
    还有一个点需要注意，这个方法需要转为字符串格式，所以需要toString()
  3.multiple(默认为true)：是否多选
  示例：
    :Ifmultiple=false
  4.clearable(默认为false)：是否可清空
    注意该属性仅适用于单选
  示例：
    :Ifmultiple=true
-->
<template>
  <div class="RangeSearch">
    <el-select
      v-model="employeesData.transshipmentdepot"
      
      filterable
      remote
      reserve-keyword
      :multiple=Ifmultiple
      :clearable=Isclearable
      :placeholder="$t(placeholder)"
      :remote-method="transshipmentdepotremoteMethod"
      :focus="transshipmentdepotremoteMethod"
      :loading="loading"
      >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default 
  data()
    return
      options: [],
      value: [],
      list: [],
      loading: false,
      employeesData:
        transshipmentdepot:,
      ,
      data:[],  //暂存下拉数据，用于当输入为空时显示
      multipleSelection:, //是否多选
    
  ,
  props:
    placeholder:
      default()
        return [];
      
    ,
    SelectData:
      default()
        return [];
      
    ,
    Ifmultiple:
      type: Boolean,
      default: true
    ,
    Isclearable:
      type: Boolean,
      default: false
    ,
  ,
  methods:
    transshipmentdepotremoteMethod(query) 
      if (query !== ) 
        this.loading = true;
        setTimeout(() => 
          this.loading = false;
          this.options = this.list.filter(item => 
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          );
        , 200);
       else 
        this.options = this.data
      
    
  ,
  mounted()
  ,
  watch:
    SelectData:function(newVal)
      this.options = newVal
      this.data = newVal
      this.list = newVal
    
  ,

</script>

<style>

</style>

以上这些是官方文档说明的我就不详细讲解了，主要讲讲我这里的封装思路

2.页面中使用

<template>
	<div>
     <RangeSearch 
       :placeholder="Please_enter_User_Stock" 
       :SelectData="this.warehouseData"
       :multiple=false
       :clearable=false
   ></RangeSearch>
	</div>
</template>
<script>
import RangeSearch from @/components/RangeSearch.vue
  mounted()
        this.warehouseData = warehouse.data.map((item) => 
            return value : item.StockID , label : item.Name
        )
    
</script>

placeholder(默认为空数组):占位符

//使用示例：
:placeholder="Please_enter_customer_ID"

因为使用组件需求的不同，其占位符也不同，通过在页面中使用时将placeholder传入拿到数据，这样子就可以做到同一个组件不同占位符。

SelectData(必传)：下拉框数据

//使用示例：
:SelectData="CustomerIDData"
	 this.CustomerIDData = CustomerID.data.map((item) => 
	   return value : item.CustomerID.toString() , label : item.CustomerID.toString()
	 )

此处有有一个重要逻辑，原本这个数据是子组件接收源数据在进行处理，但是这样子无法自适应各种数据的字段，所以使用父组件去进行处理，处理完成在传给子组件

这里还有一个点需要注意为什么要toString()一下，因为element组件的原因只支持字符转的格式，当传入的未数组以及对象时则会出错，所以这里建议toSring()一下。

this.CustomerIDData：需要渲染的数据 CustomerID.data：源数据 :SelectData="CustomerIDData"：注意放这个的位置是在使用这个组件的地方写的，剩下的是在父组件的生命周期函数mounted中写的。