Pui基础组件文档库

# ant 配置化表单组件

<template>
  <div class="dh-layout-form-demo" style="width:100%;">
    <a-button type="danger" @click="clickHandle">表单页面</a-button>
    <a-button type="danger" @click="clickHandle1">详情页面</a-button>
    <p-layout-page style="position: relative;width:100%;">
      <p-ant-layout-form
        :visible.sync="visible"
        title="单子表表单"
        ref="layoutForm"
        sub-title="弹窗无法支持的采用复杂表单"
        :wrapperCol="{span:24}"
        :formOpts="formOpts"
        :get-container="()=> $el"
        :submit="submit"
        :tabs="tabs"
        @validateError="validateError"
      >
        <template #user>
          <div>
            表单自定义插槽
            <a-button class="btn" @click="empty">清空表单</a-button>
          </div>
        </template>
        <template slot="tab1">tab切换</template>
        <template slot="tab2">tab2222切换</template>
      </p-ant-layout-form>
      <p-ant-layout-form
        :visible.sync="visible1"
        title="详情页面"
        sub-title="多块详情页面"
        handleType="desc"
        :descData="descData"
        :get-container="()=> $el"
        :tabs="tabs"
        @tabsChange="tabsChange1"
      >
        <!-- 自定义插槽 -->
        <template slot="desc2">
          <a-button>自定义插槽</a-button>
          <a-button>自定义插槽</a-button>
        </template>
        <template slot="extra">
          <a-button>按钮1</a-button>
          <a-button>按钮2</a-button>
        </template>
        <!-- value自定义插槽 -->
        <template #text>
          <div>value自定义插槽</div>
        </template>
        <template slot="tab1">tab切换</template>
        <template slot="tab2">tab2222切换</template>
      </p-ant-layout-form>
    </p-layout-page>
  </div>
</template>
<script>
import { Input, Select, Slider, DatePicker, Radio, Checkbox, Switch } from 'ant-design-vue'
export default {
  name: 'dh-layout-form-demo',
  data () {
    return {
      visible: false,
      visible1: false,
      tabs: [
        {
          key: 'tab1',
          title: '物料管理'
        },
        {
          key: 'tab2',
          title: '物料管理22'
        }
      ],
      formOpts: {
        form1: {
          title: '基础信息',
          opts: {
            data1: {
              label: '姓名',
              gutter: 4,
              rules: [
                { required: true, message: '请输入姓名', trigger: 'blur' },
                { min: 3, max: 5, message: '长度3到5个字符', trigger: 'blur' },
              ],
              bind: {
                allowClear: true
              },
              comp: Input
            },
            data2: {
              label: '性别',
              comp: Select,
              changeEvent: 'change',
              bind: {
                placeholder: '请选择'
              },
              child: [
                {
                  comp: Select.Option,
                  text: '男',
                  value: '0'
                },
                {
                  comp: Select.Option,
                  text: '女',
                  value: '1'
                }
              ]
            },
            data3: {
              label: '地址',
              comp: Input
            },
            data4: {
              label: '滑动输入',
              comp: Slider,
              changeEvent: 'change',
            },
            data5: {
              label: '日期选择',
              comp: DatePicker,
              changeEvent: 'change',
            },
            data6: {
              label: '单选',
              comp: Radio.Group,
              changeEvent: 'change',
              bind: {
                options: [
                  {
                    label: '选型1',
                    value: 1
                  },
                  {
                    label: '选型2',
                    value: 2
                  },
                  {
                    label: '选型3',
                    value: 3
                  }
                ]
              }
            },
            data7: {
              label: '多选',
              comp: Checkbox.Group,
              changeEvent: 'change',
              bind: {
                options: [
                  {
                    label: '选型1',
                    value: 1
                  },
                  {
                    label: '选型2',
                    value: 2
                  },
                  {
                    label: '选型3',
                    value: 3
                  }
                ]
              }
            },
            data8: {
              label: '开关',
              comp: Switch,
              changeEvent: 'change'
            }
          }
        },
        form2: {
          title: '附属信息',
          opts: {
            data1: {
              label: '姓名',
              comp: Input,
              // rules: [
              //   { required: true, message: '请输入姓名', trigger: 'blur' },
              //   { min: 3, max: 5, message: '长度3到5个字符', trigger: 'blur' },
              // ],
            },
            data2: {
              label: () => {
                return (
                  <div style="display:flex;align-items: center;">
                    <div class="form-required">性别</div>
                    <a-popover>
                      <template slot="content">
                        <span>总质量4.5吨及以下普通货运车辆的，可填“车籍地6位行政区域代码+000000”。</span>
                      </template>
                      <a-icon type="exclamation-circle" style="cursor: pointer;margin-left:3px;" />
                    </a-popover>
                  </div>
                )
              },
              comp: Select,
              changeEvent: 'change',
              bind: {
                placeholder: '请选择'
              },
              child: [
                {
                  comp: Select.Option,
                  text: '男',
                  value: '0'
                },
                {
                  comp: Select.Option,
                  text: '女',
                  value: '1'
                }
              ]
            },
            data3: {
              label: '地址',
              comp: Input
            },
            data4: {
              label: '滑动输入',
              comp: Slider,
              changeEvent: 'change',
            },
            text: {
              label: '日期选择',
              comp: DatePicker,
              changeEvent: 'change',
              rules: [
                { required: true, message: '请选择日期选择', trigger: 'change' }
              ]
            },
            data6: {
              label: '单选',
              comp: Radio.Group,
              changeEvent: 'change',
              bind: {
                options: [
                  {
                    label: '选型1',
                    value: 1
                  },
                  {
                    label: '选型2',
                    value: 2
                  },
                  {
                    label: '选型3',
                    value: 3
                  }
                ]
              }
            },
            data7: {
              label: '多选',
              comp: Checkbox.Group,
              changeEvent: 'change',
              bind: {
                options: [
                  {
                    label: '选型1',
                    value: 1
                  },
                  {
                    label: '选型2',
                    value: 2
                  },
                  {
                    label: '选型3',
                    value: 3
                  }
                ]
              }
            },
            data8: {
              label: '开关',
              comp: Switch,
              changeEvent: 'change'
            }
          }
        },
        form3: {
          title: '自定义插槽',
          slotName: 'user'
        }
      },
      descData: {
        desc: {
          // title: '随便一个',
          data: [
            {
              label: '字段1',
              slotName: 'text',
              value: '内容1'
            },
            {
              label: '字段2',
              value: '内容2'
            },
            {
              label: '字段3',
              value: '内容3',
            },
            {
              label: '字段4',
              value: '内容4'
            },
            {
              label: '字段5',
              value: '内容5'
            },
            {
              label: '字段6',
              value: '666666',
              tooltip () {
                return (<div>666666</div>)
              }
            },
            {
              label: '字段7',
              value: '内容7'
            },
            {
              label: '字段8',
              value: '内容8'
            },
            {
              label: '字段9',
              value: '内容9'
            }
          ]
        },
        desc1: {
          title: '随便一个22',
          data: [
            {
              label: '字段1',
              value: '内容1'
            },
            {
              label: '字段2',
              value: '内容2'
            },
            {
              label: '字段3',
              value: '内容3',
            },
            {
              label: '字段4',
              value: '内容4'
            },
            {
              label: '字段5',
              value: '内容5'
            },
            {
              label: '字段6',
              value: '内容6'
            }
          ]
        },
        desc2: {
          title: '自定义插槽',
          slotName: 'desc2'
        }
      }
    }
  },
  methods: {
    // 错误校验
    validateError (form) {
      console.log('错误校验', form)
    },
    // tabs切换
    tabsChange1 (val) {
      console.log('tabs切换', val)
    },
    // 清空表单
    empty () {
      this.$refs.layoutForm.resetFormFields()
    },
    clickHandle () {
      this.visible = true
    },
    clickHandle1 () {
      this.visible1 = true
    },
    submit (form) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve()
          console.log('form', form)
        }, 3000)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.complex_form_table {
  padding: 0;
  ::v-deep .dh_layout_page_item {
    margin: 0;
    padding: 0;
  }
}
</style>
显示代码

# PAntLayoutForm 表单布局组件

代码示例：

<!-- 第一种 表单形式 -->
<p-ant-layout-form
  :visible.sync="visible"
  title="单子表表单"
  sub-title="弹窗无法支持的采用复杂表单"
  :formOpts="formOpts"
  :get-container="getContainer"
  :tabs="tabs"
>
  <template slot="user">自定义插槽</template>
  <template slot="tab1">tab切换</template>
  <template slot="tab2">tab2222切换</template>
</p-ant-layout-form>

<!-- 第二种详情展示 根据formType-->
<p-ant-layout-form
  :visible.sync="visible1"
  title="详情页面"
  sub-title="多块详情页面"
  formType="desc"
  :descData="descData"
  :tabs="tabs"
>
  <!-- value自定义插槽 -->
  <template #text>
    <div>value自定义插槽</div>
  </template>
  <template slot="tab1">tab切换</template>
  <template slot="tab2">tab2222切换</template>
</p-ant-layout-form>

# 配置参数（Attributes）

参数 说明 类型 默认值
title 头部返回按钮标题 string 无
subTitle 头部副标题 string 无
extra 操作区，位于 title 行的行尾 slot 无
footer 底部操作区（默认展示“取消/保存”按钮；使用插槽则隐藏）footer="null"时隐藏底部操作 String/slot 无
visible a-drawer 是否显示（配合.sync 修饰符可使取消按钮关闭 a-drawer） string false
tabs 页面展示是否需要页签（并且 tabs 的 key 是插槽） Array 无
handleType 显示方式（edit 表 form 表单操作，desc 表详情页面） string edit
labelCol 表单 label 所占位置 Object { span: 6 }
wrapperCol 表单内容所占位置 Object { span: 18 }
formOpts 表单配置描述，支持多分组表单 Object 无
submit 保存时调用函数，返回 promise 可自动显示 loading function 所有表单数据
descColumn 详情页面展示每行显示几列（handleType= desc 生效） Number 4
descData 详情页面配置描述，支持多分组表 Object 无

# formOpt 配置参数（formOpt Attributes）——类型 Object

参数 说明 类型 默认值
title 表单标题(是否显示控制折叠面板功能) string 无
slotName 插槽(自定义表单数据)有插槽就无需配置 opts slot 无
opts 表单字段 Object 无
----- label 表单字段说明标题 string 无
----- comp 组件名称，可直接指定全局注册的组件，也可引入'ant-design-vue'如：Button 或者'a-button' string,component 无
----- rules 表单单项校验规则 Array 无
----- gutter 控件占用的列宽，默认占用 1 列，最多 4 列 number 1
----- changeEvent 默认事件为@input，可通过该属性指定其他事件 string 'input'
----- bind 渲染时组件会调用 v-bind 指定设置该配置更新元素的属性 object 无
----- event 配置组件事件，与写组件时@change 等同理 object 无
----- child 子组件列表，类似 select 组件存在 options 子组件的则需要用到 formOpt[] 无

# descData 配置参数（descData Attributes）——类型 Object

参数 说明 类型 默认值
title 详情标题(是否显示控制折叠面板功能) string 无
slotName 插槽(自定义详情数据)有插槽就无需配置 data slot 无
data 详情字段 Array 无
----- label 详情字段说明标题 string 无
----- value 详情字段返回值 string 无
----- slotName 插槽（自定义 value） slot 无

# 事件（Event）

方法名 说明 参数
update:visible 点击返回/取消时触发 -

# 方法（Methods）

方法名 说明 参数
resetFormFields 对该表单项进行重置，将其值重置为初始值并移除校验结果 -
saveHandle 异步 form 表单校验，生成 submit 属性 -

← ant 弹窗组件 →