Vue + elemen puede buscar de forma remota el paquete del selector de selección (ideas y código fuente compartido)

---

Escenario del proyecto:

Tengo muchos formularios de formulario y hay muchos selectores de selección en el formulario de formulario. Las listas desplegables de estos selectores se representan a través de los datos devueltos por la interfaz de back-end. Si cada selector de selección se usa para crear un componente , la redundancia de código de la página será muy grande y el costo de desarrollo y mantenimiento será relativamente alto, por lo que es necesario encapsular.

Al principio, busqué artículos en esta área en Internet y descubrí que los artículos actuales no se ajustaban a mis necesidades, así que encontré una manera de empaquetar uno y compartir mis ideas y códigos aquí.

Efecto

---

1. Lista desplegable de paquetes

Crear 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>

Para habilitar la búsqueda remota, y debe establecerse filterableen remoteverdadero, al pasar un archivo remote-method. remote-methodPor un lado Function, se llamará cuando cambie el valor de entrada y el parámetro sea el valor de entrada actual. Cabe señalar que si el-optionse representa a través del comando v-for, el-optionel atributo clave debe agregarse en este momento y su valor debe ser único.

filterable : si se puede buscar
remotamente : si se puede buscar de forma remota
palabra clave de reserva : cuando se puede realizar una selección múltiple y se puede buscar, si se debe mantener la palabra clave de búsqueda actual después de seleccionar una opción
múltiple : si se puede
borrar la selección múltiple : si se puede borrar la opción
marcador de posición : contabilizado para
el método remoto Bit :
enfoque del método de búsqueda remota : desencadenar cuando la entrada se enfoca
cargando : si los datos se obtienen de forma remota

Los anteriores se explican en documentos oficiales, por lo que no los explicaré en detalle, aquí hablaré principalmente sobre mis ideas de empaque.

marcador de posición: marcador de posición
Soy "$t(marcador de posición)" aquí, porque uso la gramática de cambiar entre chino e inglés, puede "marcador de posición" directamente)

SelectData : los datos en el cuadro desplegable
deben pasarse. SelectData aquí representa los datos que se han procesado y representado directamente en la lista desplegable. En pocas palabras, son los datos que necesitamos representar. En cuanto a cómo la fuente los datos se convierten en los datos que necesitamos representar La operación se realiza cuando se llama a este componente (el componente principal), donde solo se representan los datos en lugar de procesar los datos para representar los datos.
¿Por qué quiere hacer esto, porque puede usarse en muchos lugares, sus datos de origen son diferentes y luego los campos que deben procesarse también son diferentes? Por ejemplo, presento el ID del cliente aquí, y luego puedo represente el ID del almacén en otros lugares item.CustomerID, item.WarehouseIDde esta manera, si permite que el componente maneje los datos de origen.
Al regresar item.CustomerID.toString(), item.CustomerID.toString()
habrá un problema aquí, porque es el nombre del campo ID que necesito al renderizar el ID del cliente, por lo que no puedo adaptarlo CustomerIDcuando quiero renderizar el almacén, es decir , es difícil. codificado aquí, porque es completamente No sé cuáles son los campos de los datos de origen. Si procesamos directamente los datos de origen al llamar al componente, los datos pasados ​​​​están todos en un formato unificado, y todos los campos unificados pueden se usará para lograr el propósito de uso, pero en este caso, el costo de uso será un punto ligeramente más alto, pero no puedo pensar en un mejor método de implementación en este momento, y si hay un mejor método de implementación en el futuro , lo compartiré. Después de obtenerlo aquí , use Watch Listener para monitorear los cambios de datos y asigne los últimos datos entrantes a las opciones del componente: datos de datos de lista desplegable : Estos datos son creados por mí mismo, el propósito es hacer clic al principio o cuando la entrada está vacía, el Elemento La mejor manera es asignar el valor a vacío, pero quiero mostrar todos los datos cuando están vacíos, por lo que aquí se crean datos, y cuando los datos de entrada están vacíos, se pasan los datos y he logrado mi propósito deseado .WarehouseID item.CustomerID.toString()
SelectData

optionsoptions
lista : datos de lista desplegable procesados

2. Usar en la página

<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>

1. marcador de posición (matriz vacía por defecto): marcador de posición

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

Debido a que los requisitos de los componentes son diferentes, los marcadores de posición también lo son. Al pasar los datos al usarlos en la página placeholder, es posible tener diferentes marcadores de posición para el mismo componente.

2. SelectData (obligatorio): datos del cuadro desplegable

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

Aquí hay una lógica importante. Originalmente, estos datos son procesados ​​por el subcomponente que recibe los datos de origen, pero de esta manera no puede adaptarse a los campos de varios datos, por lo que el componente principal se usa para el procesamiento, y el procesamiento se completa y pasa a el subcomponente

Hay otro punto aquí toString()al que se debe prestar atención, porque el componente del elemento solo admite el formato de conversión de carácter a carácter, y se producirá un error cuando se pase una matriz u objeto, por lo que aquí hay una sugerencia toSring().

this.CustomerIDData: Datos que se deben representar
CustomerID.data: Datos de origen
:SelectData="CustomerIDData": Tenga en cuenta que la posición donde se coloca se escribe en el lugar donde se usa este componente, y el resto se mountedescribe en la función de ciclo de vida del componente principal.

3. múltiple (el valor predeterminado es verdadero): si seleccionar múltiples

//使用示例：
    :Ifmultiple=false

Esto es muy sencillo de entender si es de opción múltiple (Verdadero: Sí, Falso: No)

4. borrable (el valor predeterminado es falso): si se puede borrar

  //使用示例：
    :Ifmultiple=tr

Esto también es fácil de entender si se puede vaciar (Verdadero: Sí, Falso: No),
pero debe tenerse en cuenta que este atributo solo se aplica a la selección única