agel-form | 使用文档

# 创建表单

预先了解

  • 表单创建时会根据组件类型智能回填 form.data，关联响应式不必手动 set
  • 表单创建时会根据组件类型智能回填 placeholder
  • 表单组件会根据 required 智能回填必填验证规则
  • form.items 支持数组/对象配置，对象 key 将默认为 item.prop
  • item.component 为空是默认为 el-input
  • el-radio checkbox select upload 会被默认转为被数据化的 agel-xx 组件

# 行内表单

表单通过 agel-form-inline 布局组件实现行内布局，设置 layout：inline 开启。

form 支持 el-form (opens new window) 组件的属性, label-width 默认为 atuo。

item 支持 el-form-item (opens new window) 组件的属性，支持 component 组件的动态属性。

以上是一个最基础的属性支持，在不同的布局下额外支持不同的组件属性。

点击查看代码 
<template>
  <agel-form class="demo" v-model="form"></agel-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        layout: "inline",
        data: {},
        items: [
          // component 该属性不填写将默认为 el-input
          { prop: "user", label: "审批人", style: "width:120px" },
          {
            prop: "region",
            component: "el-select",
            label: "活动区域",
            options: ["区域一", "区域二"],
          },
          {
            component: "el-button",
            type: "primary",
            icon: "el-icon-search",
            slots: "查询", // 按钮插槽
            on: {
              click: () => this.$message.info("查询"),
            },
          },
        ],
      },
    };
  },
};
</script>

# 栅格表单

表单通过 agel-form-grid 组件来实现栅格布局，设置 layout：grid 开启栅格表单（默认）。

form 支持 el-row (opens new window)，el-col (opens new window)组件的属性，默认为 flex 模式。

item 支持 el-col (opens new window) 组件的属性，若未设置将会默认继承 form 对象上的 el-col 属性。

点击查看代码 
<template>
  <agel-form class="demo" v-model="form"> </agel-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        layout: "grid",
        labelWidth: "80px",
        data: {},
        gutter: 5, // 栅格间距
        span: 20, // 全局span
        xs: { span: 24, push: 0 }, // <768px 设置为 24 span
        items: [
          { prop: "name", label: "姓名", span: 10 },
          { prop: "region", label: "地址", span: 9, push: 1 },
          { prop: "intor", label: "介绍" },
          {
            prop: "email",
            label: "标签很长很长",
            labelWidth: "135px",
          },
        ],
      },
    };
  },
};
</script>

# 自适应表单

自适应是基于 agel-form-grid 组件实现，设置 responsive:true 开启响应式。

表单会根据 gird 容器宽度（非窗口宽度）自动调整栅格大小，但 item 的栅格属性优先级最高，响应式规则如下：

  let span = 24;
  if (width >= 500 && width < 900) span = 12;
  if (width >= 900 && width < 1200) span = 8;
  if (width >= 1200 && width < 1600) span = 6;
  if (width >= 1600) span = 4;
  return { span }

可以通过 responsiveMethod 属性来自定义自适应规则，支持 el-col 参数。

点击查看代码 
<template>
  <div class="demo">
    <div>
      <span>拖拽宽度进度条查看响应式效果：</span>
      <el-slider v-model="width" :step="100" show-stops :min="300" :max="1600"></el-slider>
    </div>
    <div style="overflow:auto;">
      <agel-form class="border" v-model="form" :style="{width:width+'px'} "> </agel-form>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    let items = [];
    for (let i = 0; i < 8; i++) {
      items.push({ prop: "test" + i, label: "栅格" + (i + 1) });
    }
    return {
      width: 600,
      form: {
        layout: "grid",
        responsive: true,
        // 也可以通过配置 `responsiveMethod` 属性来自定义响应式规则
        // responsiveMethod: (width) => {
        //   return width < 500 ? {span:12,...el-col props } : {....}
        // },
        data: {},
        items: [
          {
            prop: "name",
            label: "不受影响",
            placeholder: "该组件 span 不受响应式影响",
            span: 24,
          },
          ...items,
        ],
      },
    };
  },
};
</script>

# 描述表单

表单通过 agel-form-descriptions 组件来实现描述布局，设置 layout：descriptions 开启。

form 支持 el-descriptions (opens new window)组件的的属性，同样支持相关插槽。

item 支持 el-descriptions-item (opens new window) 组件的属性。

设置data._view_可开启视图查看模式，整个表单只会渲染 value（不再渲染组件），可通过 item.viewFormat 对数据进行格式化，支持返回 Vnode，也可以单独设置item.viewModel控制某个字段。

点击查看代码 
<template>
  <div class="demo border">
    <agel-form v-model="form">
      <template v-slot:extra>
        <el-checkbox v-model="form.border" style="margin-right:20px">border 样式</el-checkbox>
        <el-checkbox v-model="form.data._view_" style="margin-right:20px">视图模式</el-checkbox>
      </template>
    </agel-form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        title: "agel-form descriptions 描述排版",
        layout: "descriptions",
        border: true,
        column: 3,
        labelStyle: { "min-width": "80px" },
        data: {
          name: "kooriookami",
          phone: "18100000000",
          addr: "苏州",
          remark: "送货上门",
          number: 100,
          resource: "顺丰,圆通",
          address: "江苏省苏州市吴中区吴中大道 1188 号",
          delivery: true,
          _view_: false,
        },
        items: [
          {
            prop: "name",
            label: "用户名",
            viewModel: true,
          },
          {
            label: "手机号",
            prop: "phone",
          },
          {
            prop: "addr",
            label: "居住地",
          },
          {
            prop: "remark",
            label: "备注",
          },
          {
            label: "联系地址",
            prop: "address",
            span: 2,
          },
          {
            component: "el-checkbox",
            label: "快递方式",
            prop: "resource",
            options: ["顺丰", "圆通"],
            required: true,
          },
          {
            component: "el-switch",
            label: "即时配送",
            prop: "delivery",
            viewFormat: ({ value }) => {
              return (
                <el-tag disable-transitions>{value ? "即时" : "延时"}</el-tag>
              );
            },
          },
          {
            component: "el-rate",
            label: "评分",
            prop: "rate",
            viewFormat: ({ value }) => value + "星评分",
          },
          {
            component: "el-upload",
            label: "照片",
            prop: "upload",
            listType: "picture-card",
            action: "xx/xx/",
            viewModel: false,
          },
        ],
      },
    };
  },
};
</script>

# 表格编辑表单

表单通过 agel-form-tableditor 组件来实现表格编辑器，设置 layout：tableditor 开启。

form 支持 el-table (opens new window)组件的的部分属性，和所有事件。

item 支持 el-table-column (opens new window) 组件的部分属性。

该布局实际上是一个动态表单，form.data 必须为数组，可以从 agel-form 中导入 tableditor-menu-column 表格列组件，实现了增删改的功能，也可自定义实现代替。

同表描述表单一样，你可以设置 data._view_ 控制该行是否开启视图模式，item.videModel 设置单独字段。

点击查看代码 
<template>
  <div class="demo border">
    <agel-form v-model="form">
      <template v-slot:prepend>
        <el-table-column type="selection" align="center" :width="50"></el-table-column>
        <el-table-column label="序号" type="index" align="center" :width="50"></el-table-column>
      </template>
      <template v-slot:append>
        <tableditor-menu-column :data="form.data" :add="addRow" :edit="saveRow" :del="delRow" delConfirm></tableditor-menu-column>
      </template>
    </agel-form>
    <div style="margin-top:10px">
      <el-button type="primary" @click="validateRow">验证某一行表单</el-button>
      <el-button type="primary" @click="getRef">获取Table组件实例</el-button>
    </div>
  </div>
</template>
 
<script>
// import { tableditorMenuColumn } from "agel-form"
export default {
  data() {
    return {
      form: {
        layout: "tableditor",
        maxHeight: "300px",
        data: [
          {
            name: "表单1",
            region: "区域1",
            date: "2021-1-10",
            delivery: true,
            _view_: true,
          },
          {
            name: "表单2",
            region: "区域1",
            date: "2021-1-10",
            delivery: true,
            _view_: true,
          },
          { name: "表单3", delivery: false, _view_: false },
          { name: "表单4", delivery: true, _view_: false },
          { name: "表单5", delivery: true, _view_: false },
        ],
        items: [
          {
            label: "名称",
            prop: "name",
            required: true,
            width: "100px",
            "show-overflow-tooltip": true,
            viewModel: true,
            viewFormat: ({ value }) => {
              return <el-tag disable-transitions> {value} </el-tag>;
            },
          },
          {
            label: "即时配送",
            prop: "delivery",
            component: "el-switch",
            viewFormat: ({ value }) => {
              return (
                <el-tag disable-transitions>
                  {value ? "即时配送" : "延时配送"}
                </el-tag>
              );
            },
          },
          {
            component: "el-select",
            label: "活动区域",
            prop: "region",
            required: true,
            component: "el-select",
            options: ["区域1", "区域2"],
            width: "150px",
          },
          {
            label: "活动时间",
            prop: "date",
            component: "el-date-picker",
            width: "150px",
          },
        ],
        on: {
          // 可以触发 el-table event
          "selection-change": (selection) => {
            this.$message.info(`已选取${selection.length}条数据`);
          },
        },
      },
    };
  },
  methods: {
    addRow(done) {
      done({ name: "表单" + (this.form.data.length + 1), _view_: false });
    },
    saveRow(done, { row }) {
      //此处模拟 http 请求 保存
      setTimeout(() => {
        const isok = row.region == "区域1";
        isok
          ? this.$message.success("保存成功")
          : this.$message.error("保存失败,活动区域需要设置区域1");
        done(isok);
      }, 1500);
    },
    delRow(done, columnScope) {
      //此处模拟 http 请求 删除
      setTimeout(() => {
        this.$message.success("删除成功");
        done();
      }, 1500);
    },
    validateRow() {
      this.form.getRef("agLayout").validateRow(2, () => {
        this.$message.success("验证成功");
      });
    },
    getRef() {
      this.$message.success("获取组件实例成功，查看控制台");
      console.log("---------- el-table 实例 ----------");
      console.log(this.form.getRef("elTable"));
    },
  },
};
</script>

# 动态增减表单

同表格编辑表单一样，要实现在其他布局下的动态表单，只需要把 form.data 修改成数组，然后在合适的插槽写添加增减逻辑，插槽作用域里均可获取 scope.row scope.rowIndex 参数。

点击查看代码 
<template>
  <div class="dynamic-form">
    <div class="demo border">
      <agel-form v-model="dynamicGridForm">
        <template v-slot:prepend="scope">
          <el-col :span="24" style="margin-bottom:10px">
            <b>栅格表单 {{scope.rowIndex+1}}</b>
          </el-col>
        </template>
        <template v-slot:append="scope">
          <el-col :span="4">
            <el-button @click="del(dynamicGridForm,scope)" type="primary">删除</el-button>
          </el-col>
        </template>
      </agel-form>
      <el-button @click="push(dynamicGridForm)" type="primary">新增</el-button>
    </div>

    <div class="demo border">
      <agel-form v-model="dynamicDescForm">
        <template v-slot:title="scope">
          <span>描述表单 {{scope.rowIndex+1}}：</span>
        </template>
        <template v-slot:extra="scope">
          <el-button @click="del(dynamicDescForm,scope)" type="primary">删除</el-button>
        </template>
      </agel-form>
      <el-button @click="push(dynamicDescForm)" style="margin-top:10px" type="primary">新增</el-button>
      <el-button @click="getRef()" type="primary">获取组件实例</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicGridForm: {
        layout: "grid",
        span: 10,
        data: [{ name: "栅格布局", age: "今年芳龄18岁" }],
        items: [
          { label: "姓名", prop: "name", required: true },
          {
            label: "年龄",
            prop: "age",
          },
        ],
      },
      dynamicDescForm: {
        layout: "descriptions",
        column: 1,
        data: [{ name: "描述布局", age: "今年芳龄18岁" }],
        items: [
          { label: "姓名", prop: "name", required: true },
          {
            label: "年龄",
            prop: "age",
            slot: ({ row }) => {
              let index = this.dynamicDescForm.data.findIndex((v) => v == row);
              return <el-tag>{"年龄:" + (index + 1) + " , " + row.age}</el-tag>;
            },
          },
        ],
      },
    };
  },
  methods: {
    push(form) {
      form.data.push({ name: "", age: "今年芳龄18岁" });
    },
    del(form, scope) {
      form.data.splice(scope.rowIndex, 1);
    },
    getRef() {
      this.$message.success("获取组件实例成功，查看控制台");
      console.log(this.dynamicGridForm.getRef("dynamicData.0.name"));
    },
  },
};
</script>

<style>
.dynamic-form .el-descriptions__header {
  margin-bottom: 10px;
}
.dynamic-form .el-descriptions {
  margin-bottom: 10px;
}
</style>

agel-form 和 layout 的关系

agel-form 实质上是一个包装组件，在内部包装了 el-form 和 layout 组件，可以让你少写很多代码。在更复杂的场景下，例如一个表单下有多个分组、块的概念，且样式排版各不同，建议使用 layout 组件来实现需求，例子参考 Layout。

# 表单联动

设置 display，show，disabled 为函数来控制表单是否渲染，是否显示隐藏，是否禁用。

点击查看代码 
<template>
  <agel-form class="demo" v-model="form"> </agel-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        data: {
          grade: "很棒",
        },
        items: [
          {
            prop: "grade",
            component: "el-radio",
            label: "打分",
            options: ["很棒", "很糟糕"],
          },
          {
            prop: "good",
            label: "好评",
            show: (data) => data.grade == "很棒",
          },
          {
            prop: "bad",
            label: "差评",
            display: (data) => data.grade == "很糟糕",
          },
          {
            component: "el-button",
            type: "primary",
            slots: "发表评价",
            disabled: (data) => data.grade == "很糟糕",
          },
        ],
      },
    };
  },
};
</script>

# 表单方法

和传统的通过 $refs.form.xxx() 来调用组件方法有所不同，在 agelForm 中方法会自动注入到 form 对象中，可以直接通过 form.xxx() 来调用。

表单事件通过 form.on 定义，组件事件通过 item.on 进行定义，表单验证通过 form.rules 和 item.rules 定义，rules 为空的情况下设置 required:true 将回填一个必填 rules。

点击查看代码 
<template>
  <div class="demo">
    <agel-form v-model="form"> </agel-form>
    <el-button style="margin-left:50px" type="primary" @click="submit">提交</el-button>
    <el-button type="primary" @click="rest">重置</el-button>
    <el-button type="primary" @click="clear">清除验证</el-button>
    <el-button type="primary" @click="getRef">获取组件实例</el-button>
    <el-button type="primary" @click="getItem">获取Item</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        span: 16,
        data: {
          user: "",
          address: "https://github.com/agrass-GitHub/agel-form",
        },
        rules: {
          user: [
            {
              required: true,
              message: "请输入活动名称",
              trigger: "blur",
            },
          ],
        },
        items: [
          {
            prop: "user",
            label: "活动名称",
          },
          {
            prop: "region",
            label: "活动区域",
            component: "el-select",
            clearable: true,
            options: ["区域一", "区域二"],
            rules: {
              required: true,
              message: "你还没选区域呢",
              trigger: "change",
            },
          },
          {
            prop: "address",
            label: "项目地址",
            required: true,
          },
          {
            prop: "evaluate",
            label: "评价",
            component: "el-radio",
            options: ["很棒", "一般", "糟糕"],
            on: {
              change: (v) => {
                this.$message.info("给个好评吧");
              },
            },
          },
        ],
        on: {
          validate: (v) => {
            console.log("验证字段：" + v);
          },
        },
      },
    };
  },
  methods: {
    submit() {
      // 与 eleForm validate 有点不同，第一个参数为成功回调，第二个参数为失败回调
      this.form.validate(
        () => this.$notify.success("提交成功"),
        (errInfo) => {
          this.$notify.error("验证失败");
          console.log(errInfo);
        }
      );
    },
    rest() {
      this.form.resetFields();
    },
    clear() {
      this.form.clearValidate();
    },
    // 获取组件实例
    getRef() {
      this.$message.success("获取成功，查看控制台");
      console.log("form:", this.form.getRef("elForm"));
      console.log("layout:", this.form.getRef("agLayout"));
      console.log("user input:", this.form.getRef("user"));
    },
    // 在 items 为数组的情况下，可使用该方法快速获取 item 对象进行修改
    getItem() {
      this.$message.success("获取成功，查看控制台");
      console.log("user input:", this.form.getItem("user"));
    },
  },
};
</script>

# 表单插槽

TIP

插槽功能是保证 agel-form 灵活性的一个很核心的功能。

# 表单插槽 prepend append

表单支持在前后追加插槽内容，在不同的布局下需要不同的容器包裹。

点击查看代码 
<template>
  <agel-form class="demo" v-model="form">
    <template v-slot:prepend>
      <el-form-item>
        <span>查询条件：</span>
      </el-form-item>
    </template>
    <template v-slot:append>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
      <!-- 
        // grid 布局的情况下用 eL-col 包裹
        <el-col :span="8"> </el-col>
        // tableditor 布局的情况下用 eL-table-column 包裹
        <eL-table-column > </eL-table-column>
       -->
    </template>
  </agel-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        layout: "inline",
        data: {},
        items: [
          { prop: "user", label: "审批人" },
          { prop: "region", label: "活动区域" },
        ],
      },
    };
  },
};
</script>

# 表单项插槽 label slot slots

  • 表单项插槽支持多种类型， String，VNode，Array[Vnode]，Function，Component
  • 只有 slot 属性可额外持 Template 模板写法，请使用 v-slot 指令
点击查看代码 
<template>
  <agel-form class="demo border" v-model="form">
    <!-- slot 名称要与 item.porp 保持一致 -->
    <template v-slot:name>
      <el-tag>这是一段 template 类型自定义插槽</el-tag>
    </template>
  </agel-form>
</template>
 
<script>
export default {
  data() {
    const divider = (title) => {
      return {
        component: "el-divider",
        labelWidth: "0px",
        contentPosition: "left",
        slots: title,
      };
    };
    return {
      form: {
        labelWidth: "100px",
        span: 15,
        data: {},
        items: [
          divider("label 属性使用演示，自定义 Item Label 的插槽"),
          {
            prop: "x1",
            label: () => <el-button>自定义label</el-button>,
            labelWidth: "100px",
          },
          divider("slot 属性使用演示，自定义 Form Item 的插槽"),
          {
            prop: "x2",
            label: "Function 插槽",
            slot: () => <el-tag>这是一段 render 函数类型自定义插槽</el-tag>,
          },
          {
            prop: "x3",
            label: "String 插槽",
            slot: "这是一段 string 类型自定义插槽",
          },
          {
            prop: "x4",
            label: "VNode 插槽",
            slot: this.$createElement(
              "el-tag",
              {},
              "这是一段 vnode 对象类型自定义插槽"
            ),
          },
          {
            prop: "x5",
            prop: "name",
            label: "Template 插槽",
            slot: true,
          },
          divider("slots 属性使用演示 ，自定义组件 Component 的插槽"),
          {
            prop: "x6",
            component: "el-input",
            label: "子插槽",
            slots: {
              // 多个子插槽时， slot name 名称和 key 保持一致
              prepend: "Http://",
              append: () => <el-tag>.com</el-tag>,
            },
          },
          {
            prop: "x7",
            label: "参数子插槽",
            component: "el-checkbox",
            options: ["带有", "参数", "插槽"],
            slots: {
              option: ({ option, index }) => (
                <el-tag>
                  {index}：{option.label}
                </el-tag>
              ),
            },
          },
          {
            component: "el-button",
            label: "文字插槽",
            type: "primary",
            icon: "el-icon-search",
            slots: "查询",
          },
        ],
      },
    };
  },
};
</script>

# 插槽语法糖

  • slot 插槽为 String 类型时，会被转换成 VNode 对象
  • slots 插槽只存在 default 的情况下，可直接简写省略对象写法
slots:"查询"  ===  slots:h("span",{},"查询")  ===  slots:{ default:h("span",{},"查询") }

更多基础知识请参考 渲染函数 & JSX (opens new window)

这里有所有演示用的源码 (opens new window)。

# 表单配置

# Form Attributes

设置不同 layout 属性，form 可额外支持其他 布局属性。

属性 类型 默认值 说明
labelWidth String auto 继承自 el-form
data Object/Array { } 表单数据
items Array/Object { } 表单项配置
on Object { } 表单事件
layout String grid 布局方式 grid,inline,descriptions,tableditor
...... ...... ...... elForm 属性 (opens new window)
...... ...... ...... Layout 属性

# Form Item Attributes

设置不同 layout 属性，item 可额外支持其他 布局属性。

属性 类型 默认值 说明
label String/Funciton/Vnode - label 名称 / 插槽
prop String - data 关联字段名
display Boolean/Funciton true 是否渲染
show Boolean/Funciton true 是否显示
required Boolean false 是否生成必填验证
viewModel Boolean - 是否开启视图查看模式
viewFormat Function - 视图模式格式化函数
slot Boolean/Funciton/Vnode/String false Item 自定义插槽
component String/Component/Async Component el-input 组件名称/实例/异步组件
disabled Boolean/Funciton false 组件是否禁用
vmodel Boolean/String true false 或 .number .trim
slots Object/String/Funciton/Vnode { } 组件插槽
on Object { } 组件事件
...... ...... ...... 组件动态属性
...... ...... ...... Layout Item 属性

# Form Methods

方法会注入到 form 对象，建议直接通过 form.方法名称() 来调用。

属性 参数 说明
clearValidate - 清空验证
resetFields - 表单重置
validate callback,errcallback 表单验证
getItem prop:string 获取指定 item 对象
getRef prop:string 获取指定组件的 vue 实例

# Form Slots

属性 说明
prepend 表单头部追加内容
append 表单尾部追加内容
...... 表单项的 prop 具名插槽

# Props Keys

点击查看各布局下支持的 props 属性详情 
// 支持的 el-form 组件参数
export const formPropKeys = [
  "rules",
  "label-position",
  "label-width",
  "label-suffix",
  "hide-required-asterisk",
  "show-message",
  "inline-message",
  "status-icon",
  "validate-on-rule-change",
  "size",
  "disabled",
]

// 支持的 el-form-item 组件参数
export const formItemPropKeys = [
  "prop",
  "label",
  "label-width",
  "required",
  "rules",
  "show-message",
  "error",
  "inline-message"
]

// 支持的 el-row 组件参数
export const rowPropKeys = ["gutter", "type", "justify", "align"]

// 支持的 el-col 组件参数
export const colPropKeys = [
  "span",
  "offset",
  "push",
  "pull",
  "xs",
  "sm",
  "md",
  "lg",
  "xl",
  "tag",
]

// 支持的 agel-form-grid 组件参数
export const gridPropKeys = ["responsive", "responsiveMethod"].concat(rowPropKeys, colPropKeys)

// 支持的 el-descriptions 组件参数
export const descriptionsPropkeys = [
  "border",
  "column",
  "direction",
  "size",
  "title",
  "extra",
  "colon",
  "labelClassName",
  "contentClassName",
  "labelStyle",
  "contentStyle",
]

// 支持的 el-descriptions-item 组件参数
export const descriptionsItemPropkeys = [
  "label",
  "span",
  "labelClassName",
  "contentClassName",
  "labelStyle",
  "contentStyle",
]

// 支持的 el-table 组件参数
export const tablePropKeys = [
  "height",
  "max-height",
  "stripe",
  "border",
  "size",
  "fit",
  "show-header",
  "highlight-current-row",
  "empty-text",
  "tooltip-effect",
  "show-summary",
  "sum-text",
  "summary-method",
  "cell-class-name",
  "header-cell-class-name",
]

// 支持的 el-table-column 组件参数
export const tableColumnPropKeys = [
  "prop",
  "width",
  "fixed",
  "min-width",
  "show-overflow-tooltip",
  "align",
  "header-align",
]

// 用于判断 placeholder[输入/选择]  rules.trigger[blur/change] 
export const inputArr = ["el-input", "el-input-number", "el-autocomplete"]
export const selectArr = ["el-cascader", "el-time-select", "el-date-picker", "agel-select", "agel-tree-select", "agel-map-input"]

// 组件默认值支持情况，未涉及到的建议在全局手动配置
export const componentDefaultValue = [
  { value: "", keys: ["el-input", "el-autocomplete", "agel-select", "agel-tree-select", "el-date-picker", "el-time-select", "agel-radio"], },
  { value: false, keys: ["el-switch", "agel-checkbox"] },
  { value: 0, keys: ["el-slider", "el-rate"] },
  { value: () => [], keys: ["el-cascader", "el-transfer", "agel-upload", "agel-dynamic-tags", "agel-map-input"] },
]

// 内置的核心单组件 可省略 ag 前缀的组件
export const agComponentNames = [
  "agel-radio",
  "agel-checkbox",
  "agel-select",
  "agel-tree-select",
  "agel-upload",
  "agel-text",
]

// 作为单组件使用的 layout 组件
export const layoutComponentNames = [
  "agel-form-grid",
  "agel-form-descriptions",
  "agel-form-inline",
  "agel-form-tableditor",
]

// 默认组件名称
export const defaultComponentName = "el-input"

// form.item 对象基础结构
export const agItemProps = {
  // label 名称 / 插槽
  label: {
    type: [String, Object, Function],
    default: "",
  },
  // data 关联字段名
  prop: {
    type: String,
    default: "",
  },
  // 是否渲染
  display: {
    type: [Boolean, Function],
    default: true,
  },
  // 是否显示
  show: {
    type: [Boolean, Function],
    default: true,
  },
  // 是否生成必填验证
  required: {
    type: Boolean,
    default: false,
  },
  // 是否开启 vmoedl，可选 .number .trim 修饰符
  vmodel: {
    type: [Boolean, String],
    default: true,
  },
  // Item 自定义插槽
  slot: {
    type: [Boolean, String, Object, Function],
    default: false,
  },
  // 组件名称/实例/异步组件
  component: {
    type: [String, Object, Function],
    default: defaultComponentName,
  },
  // 组件的动态属性，解决属性名冲突使用
  $component: {
    type: Object,
    default: {},
  },
  // 组件是否禁用
  disabled: {
    type: [Boolean, Function],
    default: false,
  },
  // 组件的子插槽
  slots: {
    type: [String, Object, Function],
    default: () => new Object,
  },
  // 组件的事件
  on: {
    type: Object,
    default: () => new Object,
  },
  // 是否开启视图模式
  viewModel: {
    type: Boolean,
  },
  // 视图模式 对 value 进行格式化 可返回 Vnode
  viewFormat: {
    type: Function
  },
}

export const agItemPropKeys = Object.keys(agItemProps)

相关源码 agel-form/src/utils/const.js (opens new window)

← 其它规则 →