elementPlus 的el-select二次封装

elementPlus 的el-select二次封装

select.vue组件
<template>
  <!-- 单个下拉 Carter 2022/8/29 -->

  <el-select
    @change="selectChange"
    v-model="selectValue"
    :disabled="disabled"
    :multiple="multiple"
    :filterable="filterable"
    :placeholder="placeholder ? placeholder : '请选择'"
    :size="size ? size : 'default'"
    :style="'width:' + width"
    clearable
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>

<script setup>
/**
 * @desc 封装 element UI el-select
 * @param {selectValue} [v-model] - 双向绑定的值
 * @param {String} [type] [v-bind]- 使用哪个下拉值
 * @param {String} [size] [v-bind]- 对应el-select的size
 * @param {String} [placeholder] [v-bind]- 提示
 * @param {disabled} [Boolean] [v-bind]- 是否禁用
 * @param {multiple} [Boolean] [v-bind]- 是否可以多选
 * @param {filterable} [Boolean] [v-bind]- 是否可以搜索
 * @param {String} [width] [v-bind]- select的长度
 * @example <Select v-model:selectValue='ruleForm.a' type="configType" width="100%" placeholder="选择配置类型" />
 */
import { onMounted, ref } from 'vue'
import { selectData } from './formJs/select' //所有前端定义的下拉数据
const props = defineProps({
  type: {
    type: String,
    required: true
  },
  size: {
    type: String,
    default: 'default'
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  selectValue: {
    required: true
  },
  width: {
    type: String,
    default: '214px'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  multiple: {
    type: Boolean,
    default: false
  },
  filterable: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['update:selectValue'])
const options = ref([])

onMounted(() => {
  getOptions(props.type) //获取下拉选择的数据 ，自定义
})
const selectChange = e => {
  //选择下拉事件
  emit('update:selectValue', e)
}
const getOptions = type => {
  //获取下拉的选项
  selectData.forEach((v, i) => {
    if (type === v.type) {
      options.value = v.vals
    }
  })
}
</script>
<style scoped lang="scss"></style>

页面中使用

<template>
  <!-- Carter 2022/8/29 页面-->
  <div class="page-wrap">
    <div class="header-search">
      <el-form :inline="true" :model="pages" class="demo-form-inline">
        <el-form-item label="语言">
        <!-- 使用下拉组件-->
          <Select  
            v-model:selectValue="pages.language"
            type="language"
            placeholder="请选择语言"
          />
        </el-form-item>

  
      </el-form>
    </div>

  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Select from '@/components/form/select.vue'  //引入下拉组件

</script>
<style lang="scss" scoped></style>