记录Ant.design for Vue 中 form表单+wangEditor在表单编辑时遇到的问题

115 阅读 0 评论 76 点赞

我是靠谱客的博主喜悦花生，这篇文章主要介绍记录Ant.design for Vue 中 form表单+wangEditor在表单编辑时遇到的问题，现在分享给大家，希望可以做个参考。

记录Ant.design for Vue 中 form表单+wangEditor在表单编辑时遇到的问题

最近在使用a-form + wangEditor做项目时遇到表单在编辑时赋值时总是不成功，查看ant.desgin官方文档，发现这样一段话：在这里插入图片描述
一开始没明白该怎么用，多次猜测发现：valuePropName可定义在自定义表单控件时往组件内传入props字段名（vue子组件的props），修改后的代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//   valuePropName :value 用于往wangEditor中传参
 <a-form-item label="营期详情" :wrapperCol="{span:18}">
                    <wang-editor
                            v-decorator="['details',{initialValue: '', valuePropName:'value'}]"
                            :isClear="isClear" @change="change"></wang-editor>
</a-form-item>


// wangEditor中接收
  props: {
            value: {
                type: String,
                default: ''
            },
        },
        watch: {
      
            value: function (value) {
                if (value !== this.editor.txt.html()) {
                    this.editor.txt.html(this.value)
                }
            }
            //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
        },
        mounted() {
            this.editor.txt.html(this.value)
        },

// 在js中使用setFieldsValue为表单赋值
  this.baseForm.setFieldsValue({
                    details: this.init.details, //this.init.details为从后端拿到的值
   })