hatech-web-component-form

前端表单组件

提供通过配置快速展示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实现

---

特点？

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

---

作者/维护者

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