npm i -S v-form-layer

import VFormLayer from 'v-form-layer'
import 'v-form-layer/dist/v-form-layer.css'

Vue.use(VFormLayer)

// 或者直接使用script导入
<link rel="stylesheet" href="https://unpkg.com/v-form-layer/dist/v-form-layer.css"></link>

<script src="https://unpkg.com/v-form-layer/dist/v-form-layer.min.js"></script>

<v-form>
  <v-form-item title="名字">
    <el-input v-model="form.name" />
  </v-form-item>
  <v-form-item title="年龄" >
    <el-input v-model="form.age" />
  </v-form-item>
</v-form>

<script>
export default {
  data () {
    return {
      form: {name: '', age: ''}
    }
  }
}
</script>

<v-form :data="form">
  <v-form-item title="名字" prop="name" :rules="[{required: true}]">
    <el-input v-model="form.name" />
  </v-form-item>
  <v-form-item title="性别" prop="age" :rules="[{required: true}]">
    <el-select v-model="form.age" />
  </v-form-item>
</v-form>

<script>
export default {
  data () {
    return {
      form: {name: '', age: ''}
    }
  }
}
</script>

<v-form ref="form" v-bind="formOptions">

<script>
export default {
  data () {
    return {
      formOptions: {
        columns: [
          {
            title: '名字',
            prop: 'name',
            itemRender: { name: 'input' },
            rules: [
              { required: true }
            ]
          },
          {
            title: '年龄',
            prop: 'age',
            itemRender: { name: 'input' },
            rules: [
              { required: true }
            ]
          }
        ]
      }
    }
  }
}
</script>

focusOptions: { // object
  // 聚焦模式参数

  prevKeys: 'shift+enter', // string
  // 上一个聚焦快捷键设置

  nextKeys: 'enter', // string
  // 下一个聚焦快捷键设置

  skips: ['/node2'], // string
  // 跳过聚焦的字段集合

  loop: false // boolean
  // 聚焦循环
}

columns: [ // arra
  {
    title: 'title', // string
    // 标签文本

    titleWidth: '80px', // string
    // 表单域标签的宽度 该设置会覆盖 form-line 上的定义
    
    // 标签的宽度
    span: 24, // number
    // item 在 form-line 分成 24 份中所占的份数

    prop: '', // string
    // 字段路径
    // 规则： 对象嵌套用 '/' 分割（如对象 object:{name: ''}，则 '/name'）
    //       数组用 '/'+索引 分割（如数组 array:[{name: ''},{name: ''}]，则 '/0/name'，'/1/name' ）
    rules: [ // 校验规则
      {
        required: true, 
        message: '', //可选，默认为 不能为空 
        trigger: '' // 可选，默认为 blur，对于select组件必须声明为 change
      }, 
      {
        min: number, // 最小长度
        message: '', //可选，默认为 长度不能小于 min
      }, 
      {
        max: number, // 最大长度 
        message: '', //可选，默认为 长度不能大于 max
      }, 
      // min,max同时存在时 message 默认为 长度必须在 min 到 max 
      {
        pattern: reg, // 正则
        message: '', //可选，默认为 校验不通过
      }, 
      {
        type: 'email', // 邮箱
        message: '', //可选，默认为 请输入正确的邮箱
      }, 
      {
        type: 'phone', // 手机号
        message: '', //可选，默认为 请输入正确的手机号
      }, 
      {
        validator: Function // 自定义校验，支持异步
      }
    ]
  }
]