基础

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>