vue3+ts 封装 el-select

 封装组件

<template>
  <el-select
    v-model="content"
    :clearable="clearable"
    :placeholder="placeholder"
    :multiple="multiple"
    :collapse-tags="multiple && content.length > 7"
    :collapse-tags-tooltip="multiple && content.length > 7"
    @clear="clearChange"
    @change="iptChange"
  >
    <el-option
      v-for="item in option || lists"
      :key="item[configObj.value]"
      :label="item[configObj.label]"
      :value="item[configObj.value]"
      :disabled="item.disabled"
    />
  </el-select>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onMounted, watch, defineProps, defineEmits } from 'vue';
import request from '@/utils/request';

const props = defineProps({
  modelValue: {
    type: [Number, String, Array],
    default: ''
  },
  clearable: {
    type: Boolean,
    default: false
  },
  multiple: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: ' '
  },
  /* 配置项 */
  configObj: {
    type: Object,
    default: () => {
      return {
        value: '', // value字段名
        label: '' // 显示名称
      };
    }
  },
  option: {
    type: Array,
    default: null
  },
  urls: {
    type: Object,
    default: () => {}
  },
  error: {
    type: Boolean,
    default: false
  }
});

const content = ref('');
const lists = ref([]);

const { proxy } = getCurrentInstance();
const emit = defineEmits(['update:modelValue', 'changeObj']);
const iptChange = (e: any) => {
  if (e) {
    emit('update:modelValue', e);
    emit('changeObj', (props.option || lists.value).filter((item: any) => item[props.configObj.value] == e)[0]);
  }
};

const clearChange = () => {
  content.value = '';
  emit('update:modelValue', '');
};

watch(
  () => props.modelValue,
  (value: any) => {
    if (value !== content.value) {
      content.value = value;
    }
  },
  { immediate: true }
);

//获取数据
const getData = () => {
  const requestData = {
    url: props.urls.url,
    method: props.urls.method || 'post'
  };

  props.urls.method === 'post' ? (requestData['data'] = props.urls.data) : '';

  request(requestData).then((res: any) => {
    lists.value = res.data;
  });
};

onMounted(() => {
  if (props.urls) {
    getData();
  }
});
</script>

 使用

 <mySelect
                v-model="forms.singleMachineCapacityValue"
                style="width: 100%"
                :config-obj="{ label: 'dictLabel', value: 'dictValue' }"
                :urls="{ method: 'get', url: '/system/dict/data/type/single_maine_capacityype' }"
                placeholder="请选择单机容量"
                clearable
                @change-obj="(val) => selectChange(val, 'singleMachineCapacityLabel')"
              />