vue+elementUI Select 选择器+Popover 弹出框的使用

需求描述

vue+elementUI环境中（前后端分离）下拉框（select选择器）中，鼠标箭头悬浮到选项上时提示一段内容，比如选择器选项都是一些问题，悬浮到某个选项时可以展示该问题的答案。

代码如图

// productQuestions 后端返回的数组 <el-select v-model="ids" placeholder="请选择" multiple collapse-tags filterable><el-optionv-for="item in productQuestions":key="item.id":label="item.question":value="item.id">// Popover 弹出框<el-popoverplacement="right"width="300"trigger="hover":content="item.answer"><el-button slot="reference" type="text" style="width:100%;color:black;"><span style="float: left">{
    {
     item.question }}</span></el-button></el-popover></el-option></el-select>

效果图

总结

这两个组件在刚展示效果时（也就是不改变组件默认的样式的情况下），Popover 弹出框会把Select 选择器挡住，导致已经选中的选项不能回显。（写的不好勿喷，只是记录下，就这还是在前端同学的帮助下搞定的=。=）