• 基础
    • 普通用法
      • 自定义按钮

    基础

    TIP

    1.0.0+

    普通用法

    基础 - 图1

    里面主要包含了change和click俩个回调方法，返回当前的值value和列的属性column,resetForm清空表单内容，但是默认值不会被清空,resetChange为清空方法的回调,如果想阻止依次排列，在组织属性后面加入row为true即可，配置mock为true，在对应的column配置mock,配置即可开启数据填充,具体看如下例子

    1. <el-row style="margin-bottom:20px">
    2.    <el-radio-group v-model="sizeValue">
    3.     <el-radio label="">默认</el-radio>
    4.     <el-radio label="small">small</el-radio>
    5.     <el-radio label="mini">mini</el-radio>
    6.   </el-radio-group>
    7. </el-row>
    8. <avue-form ref="form" v-model="obj" :option="option" @reset-change="emptytChange" @submit="submit">
    9.    <template slot-scope="scope" slot="menuForm">
    10.       <el-button @click="tip">自定义按钮</el-button>
    11.   </template>
    12. </avue-form>
    14. <script>
    15. const DIC = {
    16.     VAILD: [{
    17.         label: '真',
    18.         value: 'true'
    19.     }, {
    20.         label: '假',
    21.         value: 'false'
    22.     }],
    23.     SEX: [{
    24.         label: '男',
    25.         value: 0
    26.     }, {
    27.         label: '女',
    28.         value: 1
    29.     }]
    30. }
    31. export default {
    32.     data() {
    33.       return {
    34.         obj:{},
    35.         sizeValue:''
    36.       }
    37.     },
    38.     computed: {
    39.        option(){
    40.          return{
    41.           size:this.sizeValue,
    42.           mock:true,
    43.           submitText: '完成',
    44.           column: [{
    45.                   label: "用户名",
    46.                   prop: "username",
    47.                   tip: '这是信息提示',
    48.                   span: 8,
    49.                   maxlength: 3,
    50.                   suffixIcon: 'el-icon-tickets',
    51.                   prefixIcon: 'el-icon-tickets',
    52.                   minlength: 2,
    53.                     mock:{
    54.                     type:'name',
    55.                     en:true,
    56.                   },
    57.                   rules: [{
    58.                       required: true,
    59.                       message: "请输入用户名",
    60.                       trigger: "blur"
    61.                   }],
    62.                   change:({value,column})=>{
    63.                       this.obj.address=value;
    64.                       this.$message.success('address change')
    65.                   },
    66.                   click:({value,column})=>{
    67.                       this.$message.success('click')
    68.                   }
    69.               },
    70.               {
    71.                   label: "姓名",
    72.                   prop: "name",
    73.                   mock:{
    74.                     type:'name'
    75.                   },
    76.                   span:8
    77.               },
    78.               {
    79.                   label: "类型",
    80.                   prop: "type",
    81.                   type: "select",
    82.                   dicData: DIC.VAILD,
    83.                   span:6,
    84.                   mock:{
    85.                     type:'dic',
    86.                   },
    87.               },
    88.               {
    89.                   label: "权限",
    90.                   prop: "grade",
    91.                   span: 6,
    92.                   type: "checkbox",
    93.                   dicData: DIC.VAILD,
    94.                   mock:{
    95.                     type:'dic',
    96.                   },
    97.               },
    98.               {
    99.                   label: "开关",
    100.                   prop: "switch",
    101.                   span: 6,
    102.                   type: "switch",
    103.                   dicData: DIC.SEX,
    104.                   mock:{
    105.                     type:'dic'
    106.                   },
    107.                   hide: true,
    108.                   row:true,
    109.               },
    110.               {
    111.                   label: "性别",
    112.                   prop: "sex",
    113.                   span: 6,
    114.                   type: "radio",
    115.                   dicData: DIC.SEX,
    116.                   mock:{
    117.                     type:'dic'
    118.                   },
    119.                   valueDefault: 0,
    120.                   change:({value,column})=>{
    121.                       this.$message.success('change')
    122.                   }
    123.               },
    124.               {
    125.                   label: "数字",
    126.                   prop: "number",
    127.                   type: 'number',
    128.                   span: 6,
    129.                   precision:2,
    130.                   mock:{
    131.                     type:'number',
    132.                     max:1,
    133.                     min:2,
    134.                     precision:2
    135.                   },
    136.                   valueDefault: 3,
    137.                   minRows: 0,
    138.                   maxRows: 3,
    139.                   row:true,
    140.               },
    141.               {
    142.                   label: "网站",
    143.                   span: 12,
    144.                   prop: "url",
    145.                   prepend:'http://',
    146.                   mock:{
    147.                     type:'url',
    148.                     header:false,
    149.                   },
    150.                   append:'com',
    151.                   row:true,
    152.               },
    153.               {
    154.                   label: "日期",
    155.                   prop: "date",
    156.                   type: "date",
    157.                   span:8,
    158.                   format:'yyyy-MM-dd',
    159.                   valueFormat:'yyyy-MM-dd',
    160.                   mock:{
    161.                     type:'datetime',
    162.                     format:'yyyy-MM-dd'
    163.                   },
    164.               },
    165.               {
    166.                   label: "日期时间",
    167.                   prop: "datetime",
    168.                   type: "datetime",
    169.                   span:8,
    170.                   format:'yyyy-MM-dd hh:mm:ss',
    171.                   valueFormat:'yyyy-MM-dd hh:mm:ss',
    172.                   mock:{
    173.                     type:'datetime',
    174.                     format:'yyyy-MM-dd hh:mm:ss',
    175.                     now:true,
    176.                   },
    177.               },
    178.                 {
    179.                   label: "时间",
    180.                   prop: "time",
    181.                   type: "time",
    182.                   span:8,
    183.                   format:'hh:mm:ss',
    184.                   valueFormat:'hh:mm:ss',
    185.                   mock:{
    186.                     type:'datetime',
    187.                     format:'hh:mm:ss'
    188.                   },
    189.               },
    190.               {
    191.                   label: "地址",
    192.                   span: 24,
    193.                   prop: "address",
    194.                   mock:{
    195.                     type:'county'
    196.                   },
    197.               },{
    198.                   label: "建议",
    199.                   span: 24,
    200.                   prop: "adit",
    201.                   mock:{
    202.                     type:'word',
    203.                     min:10,
    204.                     max:30
    205.                   },
    206.               },{
    207.                   label: "手机号",
    208.                   mock:{
    209.                     type:'phone'
    210.                   },
    211.                   span: 12,
    212.                   prop: "phone",
    213.               }]
    214.           }
    215.        }
    216.     },
    217.     mounted(){
    218.         this.obj.username = 'smallwei'
    219.         this.obj.switch = 0;
    220.         this.obj.phone='17547400800';
    221.     },
    222.     methods:{
    223.         emptytChange(){
    224.           this.$message.success('清空方法回调');
    225.         },
    226.         submit () {
    227.           this.$message.success('当前数据'+JSON.stringify(this.obj));
    228.         },
    229.         tip(){
    230.           this.$message.success('自定义按钮');
    231.         }
    232.     }
    233.   }
    234. </script>

    自定义按钮

    基础 - 图2

    1. <avue-form ref="form" v-model="obj0" :option="option0">
    2.   <template slot="menuForm">
    3.     <el-button type="primary" @click="handleSubmit">提 交</el-button>
    4.     <el-button  @click="handleEmpty">清 空</el-button>
    5.   </template>
    6. </avue-form>
    8. <script>
    9. export default {
    10.     data() {
    11.       return {
    12.         obj0:{},
    13.         option0:{
    14.           emptyBtn:false,
    15.           submitBtn:false,
    16.           column: [{
    17.             label: "用户名",
    18.             prop: "username",
    19.             rules: [{
    20.                 required: true,
    21.                 message: "请输入用户名",
    22.                 trigger: "blur"
    23.             }]
    24.           }]
    25.         }
    26.       }
    27.     },
    28.     methods:{
    29.       handleEmpty(){
    30.         this.$refs.form.resetForm();
    31.       },
    32.       handleSubmit(){
    33.         this.$refs.form.validate(vaild=>{
    34.           if(vaild){
    35.             this.$message.success(JSON.stringify(this.obj0));
    36.           }
    37.         })
    38.       }
    39.     }
    40.   }
    41. </script>