agel-form | 使用文档

# Layout 表单布局

在复杂的场景下，例如一个表单下有多个分组、块的概念，且样式排版各不同，你可能更需要原始的布局组件来实现需求。

# 使用

使用布局组件 el-form 组件的 model 属性是必须的，所有数据源都取自这里。

使用动态表单，则需要手动关联布局组件的 model-prop 到 el-form.model，且数据源必须是数组 。

点击查看代码 
<template>
  <div class="demo border">
    <el-divider content-position="left">el-form 包裹</el-divider>
    <el-form :model="data" class="border" label-width="auto" ref="form">
      <!-- 内联布局 -->
      <el-divider content-position="left">agel-form-inline 内联布局</el-divider>
      <agel-form-inline :items="inlineItems"></agel-form-inline>

      <!-- 栅格布局 -->
      <el-divider content-position="left">agel-form-grid 栅格布局</el-divider>
      <agel-form-grid :items="gridItems" :span="12"></agel-form-grid>

      <!-- 描述布局 -->
      <el-divider content-position="left">agel-form-descriptions 描述布局</el-divider>
      <agel-form-descriptions :items="decItems" :column="2"></agel-form-descriptions>

      <!-- 表格编辑器布局, 需要使用 model-prop 属性关联表单数据-->
      <el-divider content-position="left">agel-form-tableditor 表格编辑器布局</el-divider>
      <agel-form-tableditor :items="tableItems" model-prop="list"> </agel-form-tableditor>

      <!-- 自定义布局 -->
      <el-divider content-position="left">custom 自定义布局</el-divider>
      <el-row type="flex" justify="space-between">
        <el-form-item prop="e1" label="姓名" :rules="{required:true,message:'必填',trigger:'blur'}">
          <el-input v-model="data.e1"></el-input>
        </el-form-item>
        <el-form-item prop="e1" label="地址">
          <el-input v-model="data.e2"></el-input>
        </el-form-item>
      </el-row>

      <!-- 随意穿插其他内容  -->
      <el-button style="margin-top:20px" @click="validate" type="primary">验证</el-button>
    </el-form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      data: {
        e1: "",
        e2: "",
        list: [
          { d1: "", d2: "" },
          { d1: "", d2: "" },
          { d1: "", d2: "" },
        ],
      },
      inlineItems: [
        { prop: "a1", label: "姓名", required: true },
        { prop: "a2", label: "地址" },
      ],
      gridItems: [
        { prop: "b1", label: "姓名", required: true },
        { prop: "b2", label: "地址" },
        { prop: "b3", label: "介绍", type: "textarea", span: 24 },
      ],
      decItems: [
        { prop: "c1", label: "姓名", required: true },
        { prop: "c2", label: "地址" },
        { prop: "c3", label: "介绍", type: "textarea", span: 2 },
      ],
      tableItems: [
        { prop: "d1", label: "姓名", width: 150 },
        { prop: "d2", label: "姓名", required: true, width: 150 },
        { prop: "d3", label: "介绍",  minWidth: 100 },
      ],
    };
  },
  methods: {
    validate() {
      this.$refs.form.validate((is) => {
        if (is) {
          this.$message.success("成功");
        } else {
          this.$message.error("验证失败");
        }
      });
    },
  },
};
</script>

# 作为单组件使用

你甚至可以把 layout 组件作为单组件使用，但是这样的数据结构会稍显复杂，灵活性大幅降低。

点击查看代码 
<template>
  <div class="demo border">
    <agel-form v-model="form"></agel-form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        layout: "grid",
        data: {
          name: "演示",
          tableditor: [{ name: "tableditor", intor: "" }],
          inline: { name: "inline" },
          descriptions: { name: "descriptions" },
        },
        items: [
          { prop: "name", label: "姓名", span: 12, required: true },
          {
            prop: "descriptions",
            label: "descriptions",
            component: "agel-form-descriptions",
            column: 1,
            items: [
              { prop: "name", label: "姓名", required: true },
              { prop: "region", label: "地址" },
            ],
          },
          {
            prop: "tableditor",
            label: "table",
            component: "agel-form-tableditor",
            items: [
              { prop: "name", label: "姓名", required: true },
              { prop: "region", label: "地址" },
              { prop: "intor", label: "介绍" },
            ],
            // 注意：使用函数插槽 prepend append 只能返回单列
            slots: {
              prepend: () => {
                return (
                  <el-table-column
                    type="selection"
                    label="多选"
                    key="selection"
                  ></el-table-column>
                );
              },
              append: () => {
                return (
                  <tableditor-menu-column
                    data={this.form.data.tableditor}
                    edit={false}
                    width={80}
                  ></tableditor-menu-column>
                );
              },
            },
          },
        ],
      },
    };
  },
};
</script>

# Layout

TIP

  • 每个布局组件都共有的基础属性，插槽，方法
  • 各布局组件额外属性的支持情况，请参考 Props keys
属性 类型 默认值 说明
items Object/Array [] 表单配置项
model-prop String - 关联到表单的 prop 名称，动态表单必填
itemExtendKeys Array - 包含在内的属性名不会被注入到组件中

item 配置项支持 component 组件的动态属性。

item 配置项支持 el-form-item 属性 (opens new window)。

# Mehtod

属性 参数 说明
getItem prop:string 获取指定 item 对象
getRef prop:string 获取指定组件的 vue 实例

# Slot

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

# AgelFormGrid

属性 类型 默认值 说明
type String flex 继承自 el-row
responsive Boolean false 是否响应式布局
responsiveMethod Funciton - 自定义响应式规则
...... ...... ...... el-row 属性
...... ...... ...... el-col 属性 (opens new window)

item 配置项可额外支持 el-col 属性 (opens new window) 。

# Mehtod

属性 参数 说明
resize - 手动刷新 自适应

# AgelFormDescriptions

属性 类型 默认值 说明
border Boolean true border 样式
...... ...... ...... el-descriptions 属性 (opens new window)

item 配置项可额外支持 el-descriptions-item 属性 (opens new window)。

# AgelFormTableditor

属性 类型 默认值 说明
border Boolean true border 样式
...... ...... ...... el-table 属性 (opens new window)

item 配置项可额外支持 el-table-column 属性 (opens new window);

# Mehtod

属性 参数 说明
validateRow (index,successCallback) 对列表某一行的表单进行验证

# TableditorMenuColumn

编辑菜单列，该组件用于搭配 tableditor 布局使用，点击保存时会验证当前行。

属性 类型 默认值 说明
data Array true 表格数据
add Boolean/Function(done,scopd) true 是否显示/ done(要新增的数据)
edit Boolean/Function(done,scopd) true 是否显示/ done(保存是否成功)
del Boolean/Function(done,scopd) true 是否显示/ done(删除是否成功)
...... ...... ...... el-table-column 属性 (opens new window)

← Radio Checkbox 选择框 →