效果图:
公司项目，不方便展示，打了马赛克。
对于一些格式的内容，就可以使用<template solt="label"></template>在里面定义我们需要展示的内容，
// 记得需要去除 el-form-item 中的label标签// 可以通过 popper-class ，来设置类名<el-form-item prop="courses" class="courseIdClass"><template slot="label"><el-popoverplacement="right-end"width="500px"trigger="hover":append-to-body="false"popper-class="autoCourseRulesClasss"><div style="width: 500px; white-space: normal"><div>简要描述：</div><div>1.课程名称支持模糊搜索，课程ID精准搜索课程；</div><div>2.推荐的课程ID根据时间段来选择对应的课程；（示例：一个时间段只能选一个对应的课程，形成对应的关系，多个时间段就对应的多个课程）</div><div>3.根据匹配的规则，若推荐在同一个时间段，且同一个课程ID，那么系统会自动带出相对应的课程ID；可以复用一个课程ID（系统带出的不建议改，不然会造成课堂，建议新增）</div></div><span slot="reference" size="small" type="success" class="issueClass">课程名称/ID:<imgsrc="@/assets/notice/hints.png"style="width: 12px; height: 12px; margin-bottom: -2px"/></span></el-popover></template><el-selectref="coursesList"v-model.trim="list.courses"filterableremote:reserve-keyword="true"placeholder="请输入课程名称或课程ID,可多选"multiplevalue-key="courseId"style="width: 420px":remote-method="classNameSearch"@change="courseChange"><!-- style="width: 420px" --><!-- @change="$forceUpdate()" --><template v-if="list.courseTimes && list.videoId"><el-optionv-for="item in classNameList":key="item.courseId":label="`课程名称：${item.courseName} / 课程ID: ${item.courseId}}`":value="item"/></template></el-select></el-form-item>
下面附上我自己修改的样式：
/deep/ .autoCourseRulesClasss {background: rgba(0, 0, 0, 0.8);color: #ffffff;font-size: 12px;width: 500px;border-radius: 6px;line-height: 24px;}/deep/ .autoCourseRulesClasss .popper__arrow::after {/* 注意：placement位置不同，下面的属性不同 */border-right-color: rgba(0, 0, 0, 0.8) !important;}
popover 内容在 table 中展示不完整解决办法：
bug 示意图：
解决办法：
将append-to-body 重置为false, 这样就内容就展示完整了。然后你会发现之前已经设置的类名不生效了，。
重新写一个style标签 不要带上 scoped 。 在这个新的标签中定义样式即可生效了。
贴上我的代码：
<style lang="less">.autoCourseRulesClass {background: rgba(0, 0, 0, 0.8);color: #ffffff;font-size: 12px;}.autoCourseRulesClass .popper__arrow::after {/* 注意：placement位置不同，下面的属性不同 */border-right-color: rgba(0, 0, 0, 0.8) !important;}</style>
这样就样式就完美生效了。
