在用Ant Design vue框架时遇到一个问题，在实现编辑功能时，我们是调用一个模态框modal，调用modal中methods定义的edit方法，然后用initialValue来填充表单的初始值。但后面发现第一次打开编辑modal时，初始值能够正常赋值，当再次打开modal窗口时，表单显示的值还是第一次打开的初始值。

代码大概是这样：

<template>
  <a-modal>
    <a-form :form="form">
      <a-form-item>
        <a-input
          v-decorator="[
           'title',
           {initialValue: title, rules: [{ requied: true, message: '请输入标题' }]}
          ]"
          placeholder="起个标题" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

 data定义title参数来动态绑定数据：

data () {
  return {
    title: ''
  }
},
methods () {
  // record是list列表页面传过来的当前行对象
  edit (record) {
    this.title = record.title
  }
}

这是因为第一次打开modal时，Form会得到一个initialValue值，但该值只在组件挂载的时候执行一次，后面不会再执行，也就数据不会再次更新。

 

网上查到的方法：

modal模态框会应用一个Visible来控制是否显示， 我们只要利用这个值的变化就可以实现modal模态框的重新挂载了。

{
    Visible && <Modal ....../>
}

但这种语法是什么意思，没看懂？有知道的童鞋跟我说下

 

解决方法：

（1）去掉了initialValue参数

<template>
  <a-modal>
    <a-form :form="form">
      <a-form-item>
        <a-input
          v-decorator="[
           'title',
           {rules: [{ requied: true, message: '请输入标题' }]}
          ]"
          placeholder="起个标题" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

（2）在edit方法改为由setFieldsValue来设置初始值：

import pick from 'lodash.pick'

data () {
  return {
    model: {}
  }
},

methods () {
  // record是list列表页面传过来的当前行对象
  edit (record) {
    // 重置表单数据
    this.form.resetFields()
    this model = Object.assign({}, record)
    this.$nextTick(() => {
      // 设置初始值
      this.form.setFieldsValue(pick(this.model, ['title']))
    })
  }
}