le-form v1.0.3

le-form

基于element-ui 的form表单实现的一个高拓展性的表格布局组件，能够用于日常使用表单的布局实现。

功能说明

• 栅格化布局
• 表单数据绑定
• 表单验证
• 表格高度会根据内容高度自动产生变化

前置条件

需要先全局注册element-ui的el-form、el-form-item、el-tooltip三个组件

安装

npm install le-form --save
Or
yarn add le-form

使用

<form-container class="form"  ref="form" labelWidth="72" :model="model" :rules="rules">
  <form-item label="表单项1" prop="one">
    <el-input v-model="model.one" placeholder="请输入"></el-input>
  </form-item>
  <form-item label="表单项2" prop="two">
    <el-input v-model="model.two" placeholder="请输入"></el-input>
  </form-item>
  <form-item label="表单项3" prop="three">
    <el-input v-model="model.three" placeholder="请输入"></el-input>
  </form-item>
  <form-item label="表单项4" prop="four" inline span="12">
    <el-input v-model="model.four" placeholder="请输入"></el-input>
  </form-item>
  <form-item label="表单项5" prop="five" inline span="12">
    <el-input v-model="model.five" placeholder="请输入"></el-input>
  </form-item>
</form-container>

// 配置element的展示
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };

var app = new Vue({
  el: '#app',
  data() {
    return {
      model: {
        one: '',
        two: '',
        three: '',
        four: '',
        five: '',
      },
      rules: {
        one: [
          { required: true, message: '请填写', trigger: 'blur' },
        ],
      },
    };
  },
});

效果展示

文档

FormContainer （表单容器）

model和rules的使用方法与element-ui的form组件一致

FormContainer Attributes

FormContainer Methods

FormTitle （表单标题）

FormTitle Slot

FormItem (表单项)

FormItem Attributes

FormItem Slot