vue3+ts封装el-select el-input通用组件

在Vue 3和TypeScript环境下，你可以创建一个封装了el-select和el-input的组合组件。以下是一个简单的示例：

<template>
  <el-select v-model="modelValue" v-bind="$attrs" v-on="$listeners">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>
 
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { ElSelect, ElOption } from 'element-plus';
 
export default defineComponent({
  name: 'SelectInput',
  components: {
    ElSelect,
    ElOption
  },
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    options: {
      type: Array as PropType<{ label: string; value: string }[]>,
      default: () => []
    }
  },
  emits: ['update:modelValue']
});
</script>

使用该组件时，你可以传入modelValue（绑定值）和options（选项列表）：

<template>
  <SelectInput
    v-model="selectedValue"
    :options="[
      { label: '选项1', value: 'option1' },
      { label: '选项2', value: 'option2' }
    ]"
  />
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import SelectInput from './SelectInput.vue';
 
export default defineComponent({
  components: {
    SelectInput
  },
  setup() {
    const selectedValue = ref('');
    return {
      selectedValue
    };
  }
});
</script>

这个组件可以接收一个options数组作为选项，并通过v-model实现数据的双向绑定。你可以根据实际需求进一步扩展该组件的功能。