agel-form | 使用文档

# 序言

# 介绍

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

该组件适用于 vue2.x ，vue3.x 请转自 element-plus-crx (opens new window)。

# 特性

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

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

# 表单布局组件

# 表单子组件

# 其他

# 例子

点击查看代码 
<template>
  <div class="demo border">
    <agel-form v-model="form"> </agel-form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        // labelWidth: "150px",
        span: 15,
        data: {
          guide: {
            name: "使用 agel-form",
            desc: "素人开发,若你决定尝试,有什么问题可以联系本人微信:agrass-weixin",
          },
          delivery: true,
          slider: 20,
          tags: ["游乐园"],
        },
        items: [
          { label: "活动名称", prop: "guide.name" },
          {
            label: "建议反馈",
            prop: "guide.desc",
            type: "textarea",
          },
          {
            component: "el-input-number",
            label: "活动人数",
            prop: "number",
          },
          {
            component: "el-select",
            label: "活动区域",
            options: ["区域1", "区域2"],
            prop: "region",
          },
          {
            component: "el-date-picker",
            label: "活动时间",
            prop: "date",
          },
          {
            component: "el-switch",
            label: "是否开启",
            prop: "delivery",
          },
          {
            component: "agel-dynamic-tags",
            label: "活动标签",
            prop: "tags",
            required: true,
          },
          {
            component: "el-slider",
            label: "活动进度",
            prop: "slider",
          },
          {
            component: "el-checkbox",
            label: "活动性质",
            prop: "type",
            options: [
              "美食/餐厅线上活动",
              "地推活动",
              "线下主题活动",
              "单纯品牌曝光",
            ],
          },
          {
            component: "el-radio",
            label: "特殊资源",
            prop: "resource",
            options: ["线上品牌商赞助", "线下场地免费"],
          },
          {
            component: "el-rate",
            label: "活动评分",
            prop: "rate",
          },
          {
            component: "el-upload",
            label: "活动照片",
            prop: "upload",
            listType: "picture-card",
            action: "xx/xx/",
          },
          {
            component: "el-button",
            type: "primary",
            slots: "提交",
            on: {
              click: () => {
                this.form.validate();
              },
            },
          },
        ],
      },
    };
  },
};
</script>

快速开始 →