您现在的位置是:首页 > 伤感句子

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

作者:璐璐时间:2024-04-03 15:55:47分类:伤感句子

简介  文章浏览阅读4.2k次,点赞3次,收藏13次。element自定义el-dialog标题样式,实现title部分放置一个或多个按钮_el-dialog标题自定义样式

点击全文阅读

如图,需求是在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"在标题标签中即可

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

点击全文阅读

郑重声明:

本站所有活动均为互联网所得,如有侵权请联系本站删除处理

上一篇:关于前端的学习

下一篇:返回列表

我来说两句