element el-popover 要渲染较多内容，特定格式，以及在table 显示不完整。

效果图:
公司项目，不方便展示，打了马赛克。

对于一些格式的内容，就可以使用 <template solt="label"></template> 在里面定义我们需要展示的内容，

// 记得需要去除 el-form-item 中的label标签
//  可以通过 popper-class ，来设置类名
   <el-form-item prop="courses" class="courseIdClass">
          <template slot="label">
            <el-popover
              placement="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:
                <img
                  src="@/assets/notice/hints.png"
                  style="width: 12px; height: 12px; margin-bottom: -2px"
                />
              </span>
            </el-popover>
          </template>

          <el-select
            ref="coursesList"
            v-model.trim="list.courses"
            filterable
            remote
            :reserve-keyword="true"
            placeholder="请输入课程名称或课程ID,可多选"
            multiple
            value-key="courseId"
            style="width: 420px"
            :remote-method="classNameSearch"
            @change="courseChange"
          >
            <!-- style="width: 420px" -->
            <!-- @change="$forceUpdate()" -->
            <template v-if="list.courseTimes && list.videoId">
              <el-option
                v-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>

这样就样式就完美生效了。