ant-design-vue 问题归纳

子组件不允许改变父组件的值，也不允许通知父组件更改

报错

vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly
since the value will be overwritten whenever the parent component
re-renders. Instead, use a data or computed property based on the
prop’s value. Prop being mutated: “formVisable”

解决：
子组件命名本地变量，watch监听父变量，更新本地变量。本地变量变化时，通知父级更改。
父组件

<formDialog ref="searchDialog" 
:value="jsonData" 
:formVisable="formVisable" 
@closepop="formVisable= false" 
@formSubmit="formSubmit"/>

子组件：

<a-modal v-model="visible" title="Title" 
@ok="formSubmit" :dialog-style="{ top: '5px' }" @cancel="handleClose">
</a-modal>`
props: {
    formVisable: {
      type: Boolean,
      required: true,
      default: false
    }
  watch: {
    formVisable: function(newVal, oldVal) {
      this.visible = newVal
    }
  },
  data() {
    return {
      visible: false
    }
  }
  methods: {
  handleClose() {
      this.visible = false
      this.$emit('closepop')
    }
  }

弹窗编辑表单setFieldsValue问题

报错

Warning: You cannot set a form field before rendering a field associated with the value. You can use getFieldDecorator(id, options) instead v-decorator="[id, options]" to register it before render.

解决：
1)设定的键值对必须要和表单项一一对应，不能多传
2）将表单赋值操作放到表单更新后执行

toEdit(item) {
      //复制
      const formData = JSON.parse(JSON.stringify(item))
      //删除多余字段
      delete formData['create_by']
      delete formData['update_time']
      delete formData['create_time']
      delete formData['id']
      delete formData['update_by']
      this.formVisable = true
      //Dom更新后再赋值
      this.$nextTick(() => {
        this.$refs.formDialog.setData(formData)
      })
    },

input前后空格消除

这个真的很重要，动态生成表单时，如果modle值前后有空格，问题很难调查，切记v-model.trim

<a-input v-model.trim="selectItem.model" placeholder="请输入"/>

组件全屏封装

github地址

<a-tooltip title="全屏">
  <screenfull targetId="formDialogId" @fullScreenChange="changeDialog" class="right-menu-item hover-effect" />
</a-tooltip>
changeDialog(isFullscreen) {
  if (isFullscreen) {
    this.dialogWidth = '100%'
  } else {
    this.dialogWidth = '80%'
  }
}

下拉框选项错位不显示

:get-popup-container="
triggerNode => {
return triggerNode.parentNode || document.body
}

<!-- 下拉选框 -->
 <a-select
   v-else-if="record.type === 'select'"
   v-decorator="[
     record.model,
     {
       initialValue: record.options.defaultValue,
       rules: record.rules
     }
   ]"
   :style="`width:${record.options.width}`"
   :placeholder="record.options.placeholder"
   :show-search="record.options.showSearch"
   :options="
     !record.options.dynamic
       ? record.options.options
       : dynamicData[record.options.dynamicKey]
         ? dynamicData[record.options.dynamicKey]
         : []
   "
   :disabled="disabled || record.options.disabled"
   :allow-clear="record.options.clearable"
   :mode="record.options.multiple ? 'multiple' : ''"
   :get-popup-container="
     triggerNode => {
       return triggerNode.parentNode || document.body
     }
   "
   @change="handleChange($event, record.model)"
 />

自定义事件

<a-select
v-model="record[item.dataIndex]"
style="width: 200px"
:options="formFields"
@change="(value, option) => fieldChange(value, option, record)"
/>