子组件不允许改变父组件的值,也不允许通知父组件更改
报错
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)
insteadv-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="请输入"/>
组件全屏封装
<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)"
/>