您现在的位置是:首页 > 技术教程 正文

【前端】element自定义el-dialog标题样式,实现title部分放置按钮

admin 阅读: 2024-03-31
后台-插件-广告管理-内容页头部广告(手机)

如图,需求是在title的右边有多个按钮

此时需要自定义title部分的内容,而不是直接使用官方给的格式。

  1. <el-dialog :visible.sync="openAssetInfoDetail" width="900px" append-to-body>
  2. <div slot="title" class="dialog-title">
  3. <el-row>
  4. <span class="dialog-title-text">{{资产详情}}span>
  5. <el-button type="primary" style="float:right" @click="111">编辑el-button>
  6. el-row>
  7. div>
  8. el-dialog>

需要重点关注的地方是slot="title",然后就可以自定义标题的样式了。
由于按钮设置了style="float:right",所以按钮会与官方默认的关闭那个❌进行重合。此时需要自己设置一下按钮位置的css格式,让自己的编辑按钮离关闭按钮远一点。

解决办法

  1. <el-dialog :visible.sync="openAssetInfoDetail" width="900px" append-to-body>
  2. <div slot="title" class="dialog-title">
  3. <el-row>
  4. <span class="dialog-title-text" style="padding-right: 50px">{{assetInfoDetailTitle}}span>
  5. <el-button type="primary" @click="111">编辑el-button>
  6. el-row>
  7. div>
  8. el-dialog>

直接使用style="padding-right: 50px"在标题标签中即可

div里面 style="padding-right:距离px;" 
input按钮里面 style="margin-right:距离px;" 

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索