效果圖:
公司項(xiàng)目，不方便展示，打了馬賽克。

對(duì)于一些格式的內(nèi)容，就可以使用 <template solt="label"></template> 在里面定義我們需要展示的內(nèi)容，

// 記得需要去除 el-form-item 中的label標(biāo)簽 // 可以通過(guò) popper-class ，來(lái)設(shè)置類(lèi)名<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>簡(jiǎn)要描述：</div><div>1.課程名稱(chēng)支持模糊搜索，課程ID精準(zhǔn)搜索課程；</div><div>2.推薦的課程ID根據(jù)時(shí)間段來(lái)選擇對(duì)應(yīng)的課程；（示例：一個(gè)時(shí)間段只能選一個(gè)對(duì)應(yīng)的課程，形成對(duì)應(yīng)的關(guān)系，多個(gè)時(shí)間段就對(duì)應(yīng)的多個(gè)課程）</div><div>3.根據(jù)匹配的規(guī)則，若推薦在同一個(gè)時(shí)間段，且同一個(gè)課程ID，那么系統(tǒng)會(huì)自動(dòng)帶出相對(duì)應(yīng)的課程ID；可以復(fù)用一個(gè)課程ID（系統(tǒng)帶出的不建議改，不然會(huì)造成課堂，建議新增）</div></div><span slot="reference" size="small" type="success" class="issueClass">課程名稱(chēng)/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="請(qǐng)輸入課程名稱(chēng)或課程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="`課程名稱(chēng)：${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 內(nèi)容在 table 中展示不完整解決辦法：

bug 示意圖：

解決辦法：

將append-to-body 重置為false, 這樣就內(nèi)容就展示完整了。然后你會(huì)發(fā)現(xiàn)之前已經(jīng)設(shè)置的類(lèi)名不生效了，。
重新寫(xiě)一個(gè)style 標(biāo)簽 不要帶上 scoped 。 在這個(gè)新的標(biāo)簽中定義樣式即可生效了。

貼上我的代碼：

<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>

這樣就樣式就完美生效了。

總結(jié)

以上是生活随笔為你收集整理的element el-popover 要渲染较多内容，特定格式，以及在table 显示不完整。的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。