如圖，需求是在title的右邊有一個【編輯】按鈕

此時需要自定義title部分的內容，而不是直接使用官方給的格式。

<el-dialog :visible.sync="pr_dialog_visible"><div slot="title" class="dialog-title"><el-row><span class="dialog-title-text">關聯pr詳情</span><el-button type="primary" style="float:right" @click="edit_pr">編輯</el-button></el-row></div><!-- 接著放自己的內容 --></el-dialog>

需要重點關注的地方是slot="title"，然后就可以自定義標題的樣式了。
由于按鈕設置了style="float:right"，所以按鈕會與官方默認的關閉那個?進行重合。此時需要自己設置一下按鈕位置的css格式，讓自己的編輯按鈕離關閉按鈕遠一點。

總結

以上是生活随笔為你收集整理的element自定义el-dialog标题样式，实现在title部分放置按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。