模拟数据

一键生成模拟数据方便测试

<!-- 导入需要的包 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>

普通用法

mock设置true，在列中配置对应的规则即可，当然你可以自己写模拟逻辑，在mock写方法，会返回当前表单的数据,最后return即可，详情参考如下例子

<avue-form :option="option" v-model="form" @submit="handleSubmit"></avue-form>
<script>
const DIC = {
  VAILD: [{
      label: '真',
      value: 'true'
  }, {
      label: '假',
      value: 'false'
  }],
  SEX: [{
      label: '男',
      value: 0
  }, {
      label: '女',
      value: 1
  }]
}
export default {
  data(){
    return {
       form:{
          text:'动态内容1'
       },
       option:{
          mock:true,
          submitText: '完成',
          column: [{
              label: "用户名",
              prop: "username",
              tip: '这是信息提示',
              span: 8,
              maxlength: 3,
              suffixIcon: 'el-icon-tickets',
              prefixIcon: 'el-icon-tickets',
              minlength: 2,
                mock:{
                type:'name',
                en:true,
              },
              rules: [{
                  required: true,
                  message: "请输入用户名",
                  trigger: "blur"
              }],
              change:({value,column})=>{
                  this.obj.address=value;
                  this.$message.success('address change')
              },
              click:({value,column})=>{
                  this.$message.success('click')
              }
          },
          {
              label: "自定义",
              prop: "text2",
              mock: (form) => {
                return '自定义逻辑' + form.name
              },
              span:8
          }, 
          {
              label: "姓名",
              prop: "name",
              mock:{
                type:'name'
              },
              span:8
          },
          {
              label: "类型",
              prop: "type",
              type: "select",
              dicData: DIC.VAILD,
              span:6,
              mock:{
                type:'dic',
              },
          },
          {
              label: "权限",
              prop: "grade",
              span: 6,
              type: "checkbox",
              dicData: DIC.VAILD,
              mock:{
                type:'dic',
              },
          },
          {
              label: "开关",
              prop: "switch",
              span: 6,
              type: "switch",
              dicData: DIC.SEX,
              mock:{
                type:'dic'
              },
              hide: true,
              row:true,
          },
          {
              label: "性别",
              prop: "sex",
              span: 6,
              type: "radio",
              dicData: DIC.SEX,
              mock:{
                type:'dic'
              },
              valueDefault: 0,
              change:({value,column})=>{
                  this.$message.success('change')
              }
          },
          {
              label: "数字",
              prop: "number",
              type: 'number',
              span: 6,
              precision:2,
              mock:{
                type:'number',
                max:1,
                min:2,
                precision:2
              },
              valueDefault: 3,
              minRows: 0,
              maxRows: 3,
              row:true,
          },
          {
              label: "网站",
              span: 12,
              prop: "url",
              prepend:'http://',
              mock:{
                type:'url',
                header:false,
              },
              append:'com',
              row:true,
          },
          {
              label: "日期",
              prop: "date",
              type: "date",
              span:8,
              format:'yyyy-MM-dd',
              valueFormat:'yyyy-MM-dd',
              mock:{
                type:'datetime',
                format:'yyyy-MM-dd'
              },
          },
          {
              label: "日期时间",
              prop: "datetime",
              type: "datetime",
              span:8,
              format:'yyyy-MM-dd hh:mm:ss',
              valueFormat:'yyyy-MM-dd hh:mm:ss',
              mock:{
                type:'datetime',
                format:'yyyy-MM-dd hh:mm:ss',
                now:true,
              },
          },
            {
              label: "时间",
              prop: "time",
              type: "time",
              span:8,
              format:'hh:mm:ss',
              valueFormat:'hh:mm:ss',
              mock:{
                type:'datetime',
                format:'hh:mm:ss'
              },
          },
          {
              label: "地址",
              span: 24,
              prop: "address",
              mock:{
                type:'county'
              },
          },{
              label: "建议",
              span: 24,
              prop: "adit",
              mock:{
                type:'word',
                min:10,
                max:30
              },
          }]
       }
    }
  },
  methods:{
    handleSubmit(form){
       this.$message.success(JSON.stringify(this.form))
    }
  }
}
</script>