在antDesignOfVue中的官方描述中不需要确定按钮的时候可以把footer设为null
在这里插入图片描述

在实际的应用开发中我遇到了编辑和查看使用同一个弹窗 但是查看这个功能不需要下方的点击按钮,也就是底部的按钮部分。
footer="undefined" 时底部按钮就可以显示当footer="null"时底部按钮就可以隐藏。给footer赋值,然后控制值的改变就可以控制底部是否显示隐藏。
按照这个思路就可以完成。下面看完整代码。

<template>
<a-button type="primary" @click="look">查看</a-button>
<a-button type="primary" @click="edit">编辑</a-button>
  <a-modal
    v-model="visible"
    :title="title"
    ok-text="确认"
    cancel-text="取消"
    :width="700"
    @ok="hideModal"
    destroyOnClose
    :footer='showFooter'
  >
    <p>123123132132132132132132</p>
  </a-modal>
</template>
<script>
	export default {
		data(){
			return{
				visible:false,
				title:'',
				showFooter:undefined,
			}
		},
		methods: {
			edit(){
				this.visible = true
				this.title = '编辑'
				this.showFooter=undefined
			},
			look(){
				this.visible = true
				this.title = '查看'
				this.showFooter=null
			},
			hideModal(){
				this.visible = false
			},
		},
	}
</script>
Logo

前往低代码交流专区

更多推荐