el-popover 搭配 el-input 做出类似el-select

您好！您可以使用el-popover和el-input实现类似el-select的效果。以下是一种可能的实现方式：

1. 首先，在需要展示选项的地方添加一个el-input组件，例如：

<el-input v-model="selectedOption" placeholder="请选择" readonly></el-input>

2. 在el-input的右侧添加一个触发弹出框的按钮，比如使用el-icon-arrow-down作为按钮图标，并绑定一个点击事件，例如：

<el-input v-model="selectedOption" placeholder="请选择" readonly>
  <template #append>
    <i class="el-icon-arrow-down" @click="showPopover = true"></i>
  </template>
</el-input>

3. 使用el-popover组件作为弹出框，将需要展示的选项放在el-popover的内容中，例如：

<el-popover v-model="showPopover" placement="bottom-start">
  <ul class="select-options">
    <li v-for="option in options" :key="option" @click="selectOption(option)">{{ option }}</li>
  </ul>
</el-popover>

4. 在data选项中定义相应的数据和方法，例如：

data() {
  return {
    showPopover: false,
    options: ['选项1', '选项2', '选项3'], // 假设有这些选项
    selectedOption: '' // 用于显示选择的选项
  };
},
methods: {
 selectOption(option) {
    this.selectedOption = option;
    this.showPopover = false;
  }
}

需要注意的是，以上只是一种基本的实现方式，您可以根据具体需求进行调整和扩展。希望能对您有所帮助！如果还有其他问题，请随时提问。