如圖,需求是在title的右邊有多個按鈕
此時需要自定義title部分的內(nèi)容,而不是直接使用官方給的格式。
<!-- <el-dialog :title="assetInfoDetailTitle" :visible.sync="openAssetInfoDetail" width="900px" append-to-body>-->
<el-dialog :visible.sync="openAssetInfoDetail" width="900px" append-to-body>
<div slot="title" class="dialog-title">
<el-row>
<span class="dialog-title-text">{{資產(chǎn)詳情}}</span>
<el-button type="primary" style="float:right" @click="111">編輯</el-button>
</el-row>
</div>
</el-dialog>
需要重點(diǎn)關(guān)注的地方是slot="title",然后就可以自定義標(biāo)題的樣式了。
由于按鈕設(shè)置了style="float:right",所以按鈕會與官方默認(rèn)的關(guān)閉那個?進(jìn)行重合。此時需要自己設(shè)置一下按鈕位置的css格式,讓自己的編輯按鈕離關(guān)閉按鈕遠(yuǎn)一點(diǎn)。
解決辦法
<el-dialog :visible.sync="openAssetInfoDetail" width="900px" append-to-body>
<div slot="title" class="dialog-title">
<el-row>
<span class="dialog-title-text" style="padding-right: 50px">{{assetInfoDetailTitle}}</span>
<el-button type="primary" @click="111">編輯</el-button>
<!-- <el-button type="primary" @click="111">編輯</el-button>-->
<!-- <el-button type="primary" @click="111">編輯</el-button>-->
</el-row>
</div>
</el-dialog>
直接使用style="padding-right: 50px"在標(biāo)題標(biāo)簽中即可
文章來源:http://www.zghlxwxcb.cn/news/detail-602471.html
div里面 style="padding-right:距離px;"?
input按鈕里面 style="margin-right:距離px;"?文章來源地址http://www.zghlxwxcb.cn/news/detail-602471.html
到了這里,關(guān)于element自定義el-dialog標(biāo)題樣式,實(shí)現(xiàn)title部分放置按鈕的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!