怎么开发游戏软件_仿站小工具使用教程_百度关键词排名突然消失了_新浪体育最新消息

问题：

el-select、el-autocomplete的选项内容过长需要看清完整内容

解决方案：

使用el-popover悬停显示完整内容

代码：

<el-form-item label="备注" prop="remark"><el-autocomplete v-model="form.remark" style="width: 100%" value-key="remark" :fetch-suggestions="queryRemarkSearch" clearable><!-- 自定义每个建议项的显示内容 --><template #default="{ item }"><div><el-popoverplacement="top-start"width="600"trigger="hover":content="item.remark"><div class="option-item" slot="reference">{{ item.remark }}</div></el-popover></div></template></el-autocomplete></el-form-item><el-form-item label="备注" prop="remark"><el-select v-model="form.remark" style="width: 100%" @focus="setOptionWidth" filterable clearable ><el-option v-for="item in remarkList" :key="item.id" :label="item.remark" :value="item.id"  :style="{width:selectOptionWidth,'min-width': '350px'}"><el-popoverplacement="top-start"width="600"trigger="hover":content="item.remark"><div class="option-item" slot="reference">{{ item.remark }}</div></el-popover></el-option></el-select>
</el-form-item>setOptionWidth:function(event){// 下拉框弹出时，设置弹框的宽度this.selectOptionWidth = event.srcElement.offsetWidth + 'px'
},

效果展示：