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

Mxin5

已于 2023-10-10 21:33:38 修改

阅读量7.3k

点赞数 6

文章标签： vue.js html 前端

于 2023-03-29 10:50:00 首次发布

本文链接：https://blog.csdn.net/m0_64210833/article/details/129832067

版权

在ElementUI的对话框组件中，通过使用`slot=title`来自定义标题内容，并通过CSS样式调整，如`padding-right`，来避免添加的编辑按钮与默认关闭按钮重叠。这种方法允许对标题区域进行更精细的布局控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<!--      <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">{{资产详情}}</span>
            <el-button type="primary" style="float:right" @click="111">编辑</el-button>
          </el-row>
        </div>
     </el-dialog>

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

解决办法

   <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"在标题标签中即可