更新生成规则

表单组件

生成规则

rule = [{
     type:'input',
     field: 'test',
     title: 'test',
     value: '',
     props: {
        disabled: false
     },
     emit: ['on-change']
 }]

直接修改生成规则

rule[0].props.disabled = true;
rule[0].value = "update";

通过$f修改

获取$f

  1. //通过`field`获取生成规则
    const rule = $f.getRule('test');
    //修改方法通过同上
    
  2. const $model = $f.model();
    const rule = $model.test;
    
  3. $f.updateRule('test',{
        value: 'update',
        props: {
            disabled: true
        }
    });
    

修改组件的 value

修改指定组件

$f.setValue('test', "update");

批量修改

$f.setValue({
    test: "update"
});

自定义组件

自定义组件如果需要通过$f的方法需要定义name或者field 字段,自定义表单组件使用field,其他自定义组件使用name

自定义表单组件

生成规则

rule = [{
    type:'i-button',
    name: 'btn',
    props: {
    disabled: false
    },
    children: ['test Button']
}]

直接修改生成规则

rule[0].props.disabled = true;

通过$f修改

获取$f

  1. //通过`field`获取生成规则
    const rule = $f.getRule('btn');
    //修改方法通过同上
    
  2. const $component = $f.component();
    const rule = $component.btn;
    
  3. $f.updateRule('btn',{
        props: {
            disabled: true
        }
    });
    

更新规则

在尾部增加规则

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

通过$f添加规则

在 goods_name 字段后面增加一份图片上传组件,默认添加到尾部

$f.append({
    type:"input",
    title:"商品简介",
    field:"goods_info",
    value:"",
    props: {
     "type": "text",
     "placeholder": "请输入商品简介",
    },
    validate:[
     { required: true, message: '请输入商品简介', trigger: 'blur' },
    ],
},'goods_name');

在 goods_name 字段之前增加一份 input 组件,默认添加到头部

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

删除第一条规则

rule.splice(0,1);

删除表单组件

$f.removeField('test');

删除自定义组件

$f.removeField('btn');