Element-UI 实现el-select下拉框自定义可以过滤选项，可以全选

Element UI 的 `el-select` 组件是一个常用的下拉选择组件，它允许用户通过输入筛选选项。如果你想实现自定义筛选并支持全选功能，你可以通过以下几个步骤操作：

1. **绑定数据**: 首先，你需要将需要展示的选项作为数组传入 `el-select` 的 `options` 属性，并保持一个原始未过滤的数据源。

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

<script>
export default {
  data() {
    return {
      options: [
        ... // 原始选项数组
      ],
      selectedValue: '',
      filteredOptions: []
    }
  },
  computed: {
    // 过滤函数可以根据某个字段对原始选项进行筛选
    filteredOptions() {
      const searchKey = this.selectedValue.trim();
      if (!searchKey) {
        return this.options;
      } else {
        return this.options.filter(item => item.label.includes(searchKey));
      }
    }
  }
}
</script>

2. **全选功能**: 可以添加一个单独的开关或按钮，当切换到全选模式时，遍历所有选项设置 `selectedValue` 为它们的值。取消全选则清空 `selectedValue` 或将其设为空字符串。

<!-- 添加一个全选按钮 -->
<template>
  <div>
    <el-select v-model="selectedValue" ...>
      ...
    </el-select>
    <button @click="selectAll">全选</button>
  </div>
</template>

<script>
methods: {
  selectAll() {
    if (this.options.length > 0) {
      this.selectedValue = this.options.map(item => item.value).join(',');
    } else {
      this.selectedValue = '';
    }
  },
  unselectAll() {
    this.selectedValue = '';
  }
}
</script>

这样，用户就可以在输入框中搜索选项，同时也可以通过全选按钮快速选择所有项目。记得在实际项目中根据需求调整细节。