ant-design modal关闭处理

对话框关闭后内容不消失

问题重述

• 1、 打开对话框
  
• 2、选择内容
  
• 3、重新打开后
  
• 4、代码

<a-modal v-model="visible" title="发布活动" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          返回
        </a-button>
        <a-button key="submit" type="primary" @click="handleOk">
          发布
        </a-button>
      </template>
      <a-select
        default-value="全部会员"
        size="large"
        v-decorator="['level', { initialValue:'0'}]"
        @change="changeLevel"
      >
        <a-select-option value="0">
          全部会员
        </a-select-option>
        <a-select-option value="1">
          一级会员
        </a-select-option>
        <a-select-option value="2">
          二级会员
        </a-select-option>
        <a-select-option value="3">
          三级会员
        </a-select-option>
      </a-select>
    </a-modal>

解决方案

一、使用destroyOnClose

写成<a-modal destroyOnClose></a-modal>这样可以在关闭时销毁 Modal 里的子元素,不过不建议这样做

二、使用回调函数cancel

<a-modal @cancel="close"></a-modal>

对a-select进行双向绑定一个label

<a-select v-model="label"></a-select>

//编写a-select的默认值以及close处理方法
export default {
	data () {
			return {
				label: '全部会员'				
			}
		},
	method: {
		close () {
			this.label = '全部会员'
			}
		}
	}