form-create 追加rule【append rule】导致下拉框select数据丢失

问题描述

在vue项目中使用form-create追加rule的情况会导致select选项的数据丢失

例如：官方指南里面的4中追加rule的方法，push和append以及splice原理都是修改rule，在数组后面或者前面追加新的规则。
但是有一个问题，就是我新加的rule以后，会把已经选中的下拉框状态清除，必填项会重新红字提醒。

<template>
	<div>
	    <form-create :rule="rule" v-model="fApi" :option="options"/>
	    <h2>操作</h2>
	    <p>在表单尾部追加组件</p>
	    <ElButton @click="append1">方式1</ElButton>
	    <ElButton @click="append2">方式2</ElButton>
	    <p>在inputNumber组件底部追加组件</p>
	    <ElButton @click="set1">方式1</ElButton>
	    <ElButton @click="set2">方式2</ElButton>
	</div>
</template>

data(){
   return {
          i: 0,
          fApi:{},
          options:{
              submitBtn:false,
              resetBtn:false
          },
          rule:[
              {
                  type:'inputNumber',
                  field:'number',
                  title:'库存',
                  value: 0
              },
              {
                  type:'input',
                  field:'info',
                  title:'简介',
                  value: '',
                  props:{
                      type:'textarea'
                  }
              }
          ]
      }
      
  }

 methods:{
            getRule(){
                this.i++
                return this.$formCreate.maker.input('追加组件'+this.i,'input'+this.i,'')
            },
            append1(){
                this.rule.push(this.getRule())
            },
            append2(){
                this.fApi.append(this.getRule())
            },
            set1(){
                this.rule.splice(1,0,this.getRule())
            },
            set2(){
                this.fApi.append(this.getRule(), 'number')
            }
        }

set2函数官方给的api

interface prepend {
    //插入到第一个
    (rule:FormRule):void 
    //插入指定字段前面
    (rule:FormRule, field:string):void
    //插入到指定字段 children 中
    (rule:FormRule, field:string, child:true):void
}

用法：使用这种方法也就是set2函数，它是把当前rule挂载到goods-name表单后面，布局样式都是和goods-name一模一样，而且rule的数组长度不会变化，也就是不会改变下拉框的值。如果对布局样式没有额外要求可以采用这种方式，不会对已填写内容造成影响

fApi.prepend({
     type:"input",
     title:"商品简介",
     field:"goods_info",
     value:"",
     props: {
         "type": "text",
         "placeholder": "请输入商品简介",
     },
     validate:[
         { required: true, message: '请输入商品简介', trigger: 'blur' },
     ],
}, 'goods-name')

解决方案：

既然新增rule不管是push、splice也好都会改变原来的值，那就只有把已选中的再重新setValue

官方文档setValue可传入当前{ field:value } 也可以直接传入formData

interface setValue {
    (formData:{[field:string]:any}): void
    (field:string, value:any): void
}

setValue(field) {
  let formData = field;
    if (arguments.length >= 2)
        formData = {[field]: arguments[1]};
    h.deferSyncValue(() => {
        Object.keys(formData).forEach(key => {
            const ctxs = h.fieldCtx[key];
            if (!ctxs) return h.appendData[key] = formData[key];
            ctxs.forEach(ctx => {
                ctx.rule.value = formData[key];
            });
        });
    })
}

总结

也可能是使用的方式不对，导致下拉框数据丢失，有遇到相同问题可以一起交流学习。