vue2-element-ui-component-lib

基于 Vue 2 和 Element UI 的组件库。

安装

npm install vue2-element-ui-component-lib

快速开始

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import FormLib from 'vue2-element-ui-component-lib'

Vue.use(ElementUI)
Vue.use(FormLib)

基础用法

<template>
  <form-lib
    :model="formData"
    :rules="rules"
    :form-config="formConfig"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {},
      formConfig: [
        {
          prop: 'name',
          label: '姓名',
          type: 'el-input',
          defaultValue: ''
        }
      ],
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

动态创建 Model

组件支持根据 formConfig 自动创建表单数据模型,无需手动创建 model。

<template>
  <form-lib
    :form-config="formConfig"
    :rules="rules"
  />
</template>

<script>
export default {
  data() {
    return {
      formConfig: [
        {
          prop: 'user.name',
          label: '姓名',
          type: 'el-input',
          defaultValue: '张三'  // 设置默认值
        },
        {
          prop: 'user.age',
          label: '年龄',
          type: 'el-input-number',
          defaultValue: 18
        }
      ],
      rules: {
        'user.name': [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

动态 Model 说明

1. 自动创建

   • 组件会根据 formConfig 中的配置自动创建数据模型
   • 支持嵌套属性 (如: 'user.name')
   • 支持设置默认值

2. 数据结构

   // 上述配置会生成如下数据结构
   {
     user: {
       name: '张三',
       age: 18
     }
   }

3. 注意事项

   • 如果传入了 model 属性,则优先使用传入的 model
   • defaultValue 为空时默认值为 null
   • 支持任意层级的嵌套属性

配置项说明

FormLib Props

| 参数 | 说明 | 类型 | 必填 | 默认值 | |------|------|------|------|--------| | model | 表单数据对象 | Object | 否 | {} | | rules | 表单验证规则 | Object | 否 | - | | formConfig | 表单配置数组 | Array | 是 | - |

formConfig 配置项

| 参数 | 说明 | 类型 | 必填 | 默认值 | |------|------|------|------|--------| | prop | 表单域字段 | string | 否 | - | | label | 标签文本 | string | 否 | - | | type | 组件类型 | string | VueComponent | 否 | - | | defaultValue | 默认值 | any | 否 | null | | attrs | 组件属性 | Object | 否 | {} | | vIf | 条件渲染配置 | VIF[] | 否 | - | | children | 子表单配置 | FormConfig[] | 否 | - | | slot | 插槽配置 | object | 否 | - | | options | 下拉选项配置 | Array<{label: string, value: string | number}> | 否 | - |

VIF 配置项

| 参数 | 说明 | 类型 | 必填 | 默认值 | |------|------|------|------|--------| | relationKey | 关联的字段名 | string | 是 | - | | value | 关联值或判断函数 | string | number | function | 是 | - |

配置示例

const formConfig = [
  {
    type: 'el-input',
    label: '用户名',
    prop: 'username',
    defaultValue: '',
    attrs: {
      placeholder: '请输入用户名'
    }
  },
  {
    type: 'el-select',
    label: '性别',
    prop: 'gender',
    defaultValue: '1',
    options: [
      { label: '男', value: '1' },
      { label: '女', value: '2' }
    ]
  },
  {
    type: 'el-input',
    label: '详细地址',
    prop: 'address.detail',
    vIf: [
      {
        relationKey: 'hasAddress',
        value: true
      }
    ]
  },
  {
    type: 'el-form',
    children: [
      {
        type: 'el-input',
        label: '备注',
        prop: 'remark'
      }
    ]
  }
]

版本

当前版本: 1.0.1

许可证

MIT