vue的el-dialog固定header

    <el-dialog
      :visible.sync="xxxDialog"
      width="50%"
      class="home-confirm-dialog"
      top="2vh"
      :close-on-click-modal="false"
      :show-close="false"
      :modal-append-to-body="true"
      append-to-body
    >
<!--      头部固定-->
      <template #title>
        <el-button size="mini" type="success" @click="goXXXDownload">
          下载
        </el-button>
        <el-button
          size="mini"
          type="primary"
          style="margin-left: 80%"
          @click="xxxDialog = false"
        >
          关闭
        </el-button>
      </template>
<!--      子组件内容多时有滚动条-->
      <div>
        <xxxxx
          v-if="xxxDialog"
          :xxxData="xxxData"
        ></xxxxx>
      </div>
    </el-dialog>

<style lang="scss" scoped>
::v-deep.home-confirm-dialog .el-dialog__body {
  max-height: calc(100vh - 150px);
  overflow: auto;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}
::v-deep .el-dialog {
  position: fixed;
  height: fit-content;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
}
/*el-dialog本身的滚动条隐藏*/
::v-deep.el-dialog__wrapper .el-dialog {
  overflow: hidden;
}
</style>