agel-form | 使 element-ui form 组件更简单

文档

• 官网 - 使用文档

安装使用

npm install agel-form --save # yarn add agel-form

介绍

agel-form 是基于 element-ui form 的二次封装，极简的思想，完全的数据驱动，拥有绝对的灵活性，可以帮助你更快速的开发！up! up! up!

特性

该组件的思想就是以一个 form 对象来做所有的操作，它做了如下事情：

• 支持 element-ui 所有表单组件 attributes 配置
• 支持 element-ui 所有表单组件 events 事件
• 支持 element-ui 所有表单组件 slots 插槽
• 支持 element-ui Row Col 组件布局
• 支持 element-ui Descriptions 组件布局
• 支持 element-ui Table 表单编辑器
• 表单视图查看模式
• 动态增减表单
• 容器宽度自适应布局
• 联动显示隐藏禁用
• 智能回填 form.data，placeholder，rules
• 全局配置
• 数据化的基础组件
• 灵活自定义组件 / 搭配第三方组件

表单布局组件

• agel-form-inline
• agel-form-grid
• agel-form-descriptions
• agel-form-tableditor

表单子组件

• agel-checkbox
• agel-radio
• agel-select
• agel-tree-select
• agel-upload
• agel-map-input
• agel-dynamic-tags

其他

• agel-search-panel
• agel-form-dialog

如此简单

<template>
  <agel-form v-model="form"></agel-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {},
    };
  },
};
</script>