ElementUI el-dialog更换顶部头部背景色样式

方法一：

效果图：

image.png

做法：
在style里可以修改字体颜色背景色

<el-dialog :visible.sync="dialogVisible">
       <div slot="title" class="header-title" :style="{'background': theme.pageTitleBgColor, 'color': 'white'}">
           <div style="padding:15px 20px;">编辑框</div>
       </div>
          ......

方法二：

效果图：

image.png

做法：
通过直接修改el-dialog样式的方式

<div class="dialog_diy">
     <el-dialog :visible.sync="dialogVisible">
          <div slot="title" class="header-title" :style="{'background':theme.pageTitleBgColor,'color':theme.pageTitleTextColor}">
            <div style="padding:15px 20px;">编辑框</div>
          </div> 

<style lang="scss" scoped>
.dialog_diy{
  ::v-deep .el-dialog__wrapper { // eslint-disable-line
    .el-dialog {
        .el-dialog__body{
          padding: 0px;
        }
        .el-dialog__header{
          padding: 0px;
        }
        .el-dialog__headerbtn {
          top: 5px;
          right: 5px;
          padding-top: 10px;
        }
        .el-dialog__headerbtn .el-dialog__close {
          color: #fff;
          height: 30px;
          width: 35px;
        }
         .el-dialog__headerbtn .el-dialog__close:hover {
          color: gray;
        }
    }
  }
}
</style>

不显示dialog右上角的 X

<el-dialog
      title="提示"
      :visible.sync="dialogShow"
      width="20%"
      center
      :destroy-on-close="true"
      :show-close="false"
>

不显示dialog右上角的 X
:destroy-on-close="true"
:show-close="false"