526互联

vue3 el-dialog 的底部按钮居中

发布时间 2023-06-29 15:48:27作者: 火龙果呀

需要在el-dialog 外前台一层div
代码如下

<div>
    <el-dialog
      v-if="fillQuotationVisible"
      v-loading="loading"
      v-model="fillQuotationVisible"
      title="填写报价"
      :width="1000"
      class="noPaddingDialog"
      @close="cancel()"
      show-close
    >
      <div>这里写具体业务逻辑</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel()"> 取消 </el-button>
          <el-button type="primary" @click="saveClick(false)">
            保存草稿
          </el-button>
          <el-button type="primary" @click="saveClick(true)">
            保存并提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>

css 代码如下

<style lang="less" scoped>
/deep/ .noPaddingDialog .el-dialog__footer {
  text-align: center;
}
</style>