ant design vue 的ele-modal不显示底部取消确认按钮

最新推荐文章于 2024-08-19 23:43:06 发布

zheshihuahua

最新推荐文章于 2024-08-19 23:43:06 发布

阅读量1.2k

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zheshihuahua/article/details/137052169

版权

文章介绍了如何在Ele-UI中定制模态框的行为，包括隐藏底部按钮、修改确认和取消按钮的文字，以及自定义显示模式。

摘要由CSDN通过智能技术生成

1.不显示：

:footer="null"

   <ele-modal
      :width="1200"
      :visible="visible"
      :confirm-loading="loading"
       title="监控点"
      :body-style="{ paddingBottom: '8px' }"
      @update:visible="updateVisible"
      @validate="validate1"
      @ok="save"
     :footer='null' //不显示底部按钮
    >

2.底部按钮文字更改：

   <ele-modal
      :width="1200"
      :visible="visible"
      :confirm-loading="loading"
       title="监控点"
      :body-style="{ paddingBottom: '8px' }"
      @update:visible="updateVisible"
      @validate="validate1"
      @ok="save"
      ok-text="返回"   //确定按钮的文字
        cancel-text="取消"   //取消按钮的文字
        
    >

3.自定义显示：

  <ele-modal
    :width="1200"
    :visible="visible"
    :confirm-loading="loading"
    title="监控点"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @validate="validate1"
    @ok="save"
    :footer="null"
  >

//
 <a-row style="margin: 20px 10px 5px" type="flex">
      <a-col flex="1 1 200px"></a-col>
      <a-col flex="0 0 70px">
        <button class="ant-btn ant-btn-primary" type="button" @click="submit" style>
          <span>关闭</span>
        </button>
      </a-col>
    </a-row>