前端表单组件

提供通过配置快速展示Form表单，支持Element-UI中常用元素，如Input\Select\Radio等

主要思路是依托于ElementUI的Form通过类型映射，展示表单项。

使用说明

安装

  npm install hatech-web-component-form

初始化

  // main.js
  import Vue from 'vue'
  import HatechForm from 'hatech-web-component-form'
  Vue.use(HatechTable)
  // or
  import { HatechForm } from 'hatech-web-component-form'
  export default {
    components: {
      HatechForm
    }
  }

使用示例

  <hatech-form :config="config" :data="data" @onEvent="onEvent"></hatech-form>

  export default {
    data() {
      return {
        data: {
          ...
        },
        config: {
          ...
        }
      }
    }
  }

参数

| 参数名 | 类型 | 描述 | | ---------------------------- | ---------------- | ------------------------------------------------ | | data | Object | 数据源 | | config | Object | 配置 | | config.form | Object | 表单配置项，支持el-form所有属性 | | config.row | Object | 栅格布局参数，支持el-row所有属性 | | config.columns | Array | 表单项配，支持el-form-item中的所有属性置 | | config.columns[].type | String | 表单项类型，详见下表表单项配置类型 | | config.columns[].{MODE}Type | String | 模式对应表单项类型 | | config.columns[].show | Boolean\Function | 是否展示表单项，如果值为函数，需要返回Boolean值 | | config.columns[].col | Object | 栅格布局参数，支持el-col所有属性 | | config.columns[].props | String | 具体展示组件属性，详细可见element-ui组件文档 | | config.columns[].{MODE}Props | Object | 对应模式配置 | | config.columns[].props.event | String | 相关事件名 |

表单项配置类型

| 类型值 | 类型名称 | 说明 | | ------------------------------ | -------------- | ---------------------------------------------------------------------------------------------- | | slot | 插槽 | 插槽名同prop属性 | | text | 文本、html显示 | 通过props内设置type='html'展示html | | | | 当type=html时，可使用key对应元素属性，event对应抛出事件名 | | input | 输入框 | 同el-input。添加modifier属性，支持修饰符值 | | number | 数字输入框 | 同el-input-number | | radio | 单选框 | 同el-radio | | checkbox | 多选框 | 同el-checkbox | | select | 下拉框 | 同el-select | | date | 日期选择框 | 同el-date-picker | | time | 时间选择框 | 同el-time-picker | | cascader | 级联 | 同el-cascader | | switch | 开关 | 同el-switch | | slider | 滑块 | 同el-slider | | rate | 评分 | 同el-rate | | transfer | 穿梭框 | 同el-transfer | | progress | 进度条 | 同el-progress | | tree | 树形控件 | 同el-tree,触发的事件由onFormTreeEvent传出 | | table | 表格控件 | 同hatech-table触发的事件由onFormTableEvent传出 | | button | 按钮控件 | options 同el-button | | custom（自定义组件后半段名称） | 自定义组件 | 以Form开头，比如FormCustomerComponent，且此组件需要全局注册；但type中只要写CustomerComponent； |

插槽

当type为slot时，提供同prop值一样的插槽

...

事件

onEvent: 事件总处理，所有事件都由此事件发射

• event: {String} 子事件名
• params: {Object} 事件相关参数

onFormDataChange: 表单数据变化

• newValue: 新值
• oldValue: 旧值
• item: 表单项配置

onFormTreeEvent: 树相关事件传递

• event: 事件名
• params: 事件参数

onFormTableEvent: 表格相关事件传递

• event: 事件名
• params: 事件参数

onFormButtonEvent: 按钮点击相关事件

• params: 按钮配置

主题变量

未使用主题变量

依赖

| 依赖名 | 版本 | 链接 | | -------------------- | ----- | -------------------------------------------------------------------------- | | hatech-web-component | 0.0.8 | http://git.hatech.com.cn:8088/hatech-web/hatech-web-template-component.git |

知识点？

使用共识？

如已提供相关表单项，可直接使用。有个性化需要，请通过slot实现

特点？

该组件属性纯组件中的表单组件，属于基础组件

作者/维护者

| 名称 | 联系方式 | 参与部分 | | ---- | --------------------- | ------------ | | 吴浩 | [email protected] | 初始版本开发 |