⚠️ mock数据仅仅在使用到的时候才会加载,所有并不会产生额外的代码


ele-form-mock.gif

使用方式 1: 全局指定

全局指定 mock 为 true , 则每个表单项会根据类型, 自动填充, 当然也 可以局部覆盖


<!-- 这里全局指定 mock 为 true -->
<ele-form :mock="true" v-model="formData" :formDesc="formDesc"></ele-form>


使用方式 2: 局部指定


<template>
  <ele-form v-model="formData" :formDesc="formDesc"></ele-form>
</template>

<script>
  export default {
    data() {
      return {
        formData: {},
        formDesc: {
          name: {
            type: 'input',
            label: '姓名',
            // 这里指定 mock 为 true, 会根据类型自动判定值
            // 如果是第三方扩展,未指定mockRule, 则这里会报警告,需要采取下面两种书写方式
            mock: true
          },
          age: {
            type: 'number',
            label: '年龄',
            // 这里指定为 @integer(20, 50)
            // 书写规则同mockjs: http://mockjs.com/examples.html#DPD
            mock: '@integer(20, 50)'
          },
          activity: {
            type: 'checkbox',
            label: '爱好',
            options: ['旅游', '篮球', '羽毛球'],
            // 这里mock为函数类型
            // param: Function { mock } mock函数,同mockjs
            // param: Function { random } random 函数, 同mockjs
            mock (mock, random) {
                return random.multiple(['旅游', '羽毛球'])
            }
          }
        }
      }
    }
  }
</script>