修改表单规则

在尾部追加规则

::: demo

  1. <template>
  2. <div>
  3.     <form-create :rule="rule" v-model="fApi" :option="options"/>
  4.     <h2>操作</h2>
  5.     <p>在表单尾部追加组件</p>
  6.     <ElButton @click="append1">方式1</ElButton>
  7.     <ElButton @click="append2">方式2</ElButton>
  8.     <p>在inputNumber组件底部追加组件</p>
  9.     <ElButton @click="set1">方式1</ElButton>
  10.     <ElButton @click="set2">方式2</ElButton>
  11. </div>
  12. </template>
  14. <script>
  15.     export default {
  16.         data(){
  17.             return {
  18.                 i: 0,
  19.                 fApi:{},
  20.                 options:{
  21.                     submitBtn:false,
  22.                     resetBtn:false
  23.                 },
  24.                 rule:[
  25.                     {
  26.                         type:'inputNumber',
  27.                         field:'number',
  28.                         title:'库存',
  29.                         value: 0
  30.                     },
  31.                     {
  32.                         type:'input',
  33.                         field:'info',
  34.                         title:'简介',
  35.                         value: '',
  36.                         props:{
  37.                             type:'textarea'
  38.                         }
  39.                     }
  40.                 ]
  41.             }
  43.         },
  44.         methods:{
  45.             getRule(){
  46.                 this.i++;
  47.                 return this.$formCreate.maker.input('追加组件'+this.i,'input'+this.i,'');
  48.             },
  49.             append1(){
  50.                 this.rule.push(this.getRule());
  51.             },
  52.             append2(){
  53.                 this.fApi.append(this.getRule());
  54.             },
  55.             set1(){
  56.                 this.rule.splice(1,0,this.getRule());
  57.             },
  58.             set2(){
  59.                 this.fApi.append(this.getRule(), 'number');
  60.             }
  61.         }
  62.     }
  63. </script>

:::

在顶部增加规则

::: demo

  1. <template>
  2. <div>
  3.     <form-create :rule="rule" v-model="fApi" :option="options"/>
  4.     <h2>操作</h2>
  5.     <p>在表单顶部增加组件</p>
  6.     <ElButton @click="append1">方式1</ElButton>
  7.     <ElButton @click="append2">方式2</ElButton>
  8.     <p>在input组件顶部增加组件</p>
  9.     <ElButton @click="set1">方式1</ElButton>
  10. </div>
  11. </template>
  13. <script>
  14.     export default {
  15.         data(){
  16.             return {
  17.                 i: 0,
  18.                 fApi:{},
  19.                 options:{
  20.                     submitBtn:false,
  21.                     resetBtn:false
  22.                 },
  23.                 rule:[
  24.                     {
  25.                         type:'inputNumber',
  26.                         field:'number',
  27.                         title:'库存',
  28.                         value: 0
  29.                     },
  30.                     {
  31.                         type:'input',
  32.                         field:'info',
  33.                         title:'简介',
  34.                         value: '',
  35.                         props:{
  36.                             type:'textarea'
  37.                         }
  38.                     }
  39.                 ]
  40.             }
  42.         },
  43.         methods:{
  44.             getRule(){
  45.                 this.i++;
  46.                 return this.$formCreate.maker.input('追加组件'+this.i,'input'+this.i,'');
  47.             },
  48.             append1(){
  49.                 this.rule.splice(0,0,this.getRule());
  50.             },
  51.             append2(){
  52.                 this.fApi.prepend(this.getRule());
  53.             },
  54.             set1(){
  55.                 this.fApi.prepend(this.getRule(), 'info');
  56.             }
  57.         }
  58.     }
  59. </script>

:::

添加组件的子组件

::: demo

  1. <template>
  2. <div>
  3.     <form-create :rule="rule" v-model="fApi" :option="options"/>
  4.     <h2>操作</h2>
  5.     <p>在 col 组件内部增加</p>
  6.     <ElButton @click="append1">方式1</ElButton>
  7.     <ElButton @click="append2">方式2</ElButton>
  8. </div>
  9. </template>
  11. <script>
  12.     export default {
  13.         data(){
  14.             return {
  15.                 i: 0,
  16.                 fApi:{},
  17.                 options:{
  18.                     submitBtn:false,
  19.                     resetBtn:false
  20.                 },
  21.                 rule:[
  22.                     {
  23.                         type:'el-col',
  24.                         title:'布局组件',
  25.                         name: 'col',
  26.                         children: []
  27.                     }
  28.                 ]
  29.             }
  31.         },
  32.         methods:{
  33.             getRule(){
  34.                 this.i++;
  35.                 return this.$formCreate.maker.input('追加组件'+this.i,'input'+this.i,'');
  36.             },
  37.             append1(){
  38.                 this.rule[0].children.push(this.getRule());
  39.             },
  40.             append2(){
  41.                 this.fApi.append(this.getRule(),'col', true);
  42.             }
  43.         }
  44.     }
  45. </script>

:::

删除第一条规则

  1. rule.splice(0,1);

删除表单组件

  1. fApi.removeField('field');

删除自定义组件

  1. $f.removeField('name');