下拉框组件的封装（element ui ）复杂一点的

1. 组件的基本结构

      在组件的基本结构中，除了简单地使用 el-select 和 el-option 组件外，我们还可以考虑添加一些额外的功能，比如搜索功能、多选功能等。下面是一个稍微复杂一点的下拉框组件的基本结构示例：

<template>
  <div>
    <el-select v-model="selectedValue" placeholder="请选择" @change="handleSelectChange" filterable multiple>
      <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 {
      selectedValue: '',
      options: []
    };
  },
  props: {
    // 可以通过props接收父组件传递的参数
  },
  methods: {
    handleSelectChange(value) {
      this.$emit('select-change', value);
    }
  }
};
</script>

<style scoped>
/* 可以根据需要定制样式 */
</style>

     在这个示例中，我们添加了 filterable 和 multiple 这两个属性，实现了下拉框的搜索和多选功能。

2. 数据的传递与绑定

     除了简单地传递选项列表数据外，我们还可以考虑动态加载选项数据或者对选项数据进行筛选处理。在实际项目中，有时候选项数据可能会从接口异步获取，我们可以在组件内部进行相关处理。

<template>
  <div>
    <el-select v-model="selectedValue" placeholder="请选择" @change="handleSelectChange" filterable>
      <el-option
        v-for="item in filteredOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [], // 原始选项数据
      filteredOptions: [] // 筛选后的选项数据
    };
  },
  props: {
    // 可以通过props接收父组件传递的参数
  },
  methods: {
    handleSelectChange(value) {
      this.$emit('select-change', value);
    }
  },
  watch: {
    'options': {
      handler(newVal, oldVal) {
        // 在选项数据发生变化时，筛选出符合条件的选项
        this.filteredOptions = this.options.filter(item => item.label.includes('关键词'));
      },
      immediate: true
    }
  }
};
</script>

在这个示例中，我们通过 watch 监听 options 数据的变化，并根据特定条件对选项数据进行筛选，然后更新显示在下拉框中的选项。

3. 事件处理

      在事件处理方面，除了处理选项变化外，我们还可以考虑其他一些事件，比如下拉框的展开和收起事件、清空选项事件等。这样可以为用户提供更好的交互体验。

<template>
  <div>
    <el-select v-model="selectedValue" placeholder="请选择" @change="handleSelectChange" @visible-change="handleVisibleChange" @clear="handleClear">
      <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 {
      selectedValue: '',
      options: []
    };
  },
  props: {
    // 可以通过props接收父组件传递的参数
  },
  methods: {
    handleSelectChange(value) {
      this.$emit('select-change', value);
    },
    handleVisibleChange(visible) {
      console.log('下拉框是否展开：', visible);
    },
    handleClear() {
      console.log('清空选项');
    }
  }
};
</script>

在这个示例中，我们添加了 @visible-change 和 @clear 两个事件处理函数，分别处理下拉框的展开和收起事件以及清空选项事件。