Hawthorn-Api

# HtForm 说明

HtForm 自定义表单组件，基于el-form实现；
Author andy.ten@tom.com & xukaixing@hotmail.com

# 示例

<template>
  <div>
   <ht-form ref-form="formList" divider="form表单" :form-list="formList" :form-style="{width:'800px'}" />
  </div>
</template>
<script>
export default {
  data() {
    return {
        formList: [
        {
          type: 'text', // text、checkbox、radio、dic、textarea、date、datetime、number
          format: [1, 'is_any', 5],
          label: '名称',
          hidden: false,
          field: 'demoName',
          placeholder: 'name',
          value: 'admin',
          colspan: 1 // 占用输入域个数,最大不能超过4
        },
        {
          type: 'dic',
          format: [0, 'isDic', 30],
          dicType: 'yxzt',
          label: '状态',
          field: 'status'
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          dateType: 'date',
          label: '标准日期',
          hidden: false,
          field: 'demoDate'
        },
        {
          type: 'blank'
        },
        {
          type: 'text',
          format: [0, 'isAny', 10],
          label: '禁用',
          disabled: true,
          field: 'disabledField'
        },
        {
          type: 'text',
          format: [0, 'isAny', 10],
          label: '只读',
          readonly: true,
          field: 'readonlyField'
        },
         {
          type: 'textarea',
          format: [0, 'isAny', 10],
          label: 'textarea框',
          rows: 2,
          field: 'textareaField'
        }
      ],
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
Expand Copy

# API

# Form Attributes

参数 说明 类型 可选值 默认值
ref-form 设置form的ref属性 String — —
form-list 设置form的表单域list Array — —
divider 设置form的分栏标题 String — 检索分栏
is-divider 设置是否默认自带分栏 Boolean true,false true
size 设置form大小 String medium / small / mini small
form-style 设置form风格样式 Object :form-style="{width:'400px'}" —
label-width 设置label宽度 String,Number 不带px的数字 90
scroller 设置form是否显示滚动条 Boolean true,false true

# Form Slots

name 说明
default 设置form默认插槽，对于查询表单，插槽为 <ht-search-bar/> 按钮

# Form Methods

方法名 说明 参数 示例
— — — —

# Form-Item Attributes

参数 说明 类型 可选值 默认值
type 设置表单域的type属性 String text / textarea / dic /
date / datetime / layer / number		 text
label 设置表单域的label属性 String — —
format 设置表单域的format格式属性 Array — [0, 'isAny', 30]
field 设置表单域的field字段属性 String — —
hidden 设置表单域是否隐藏属性 Boolean true,false false
disabled 设置表单域的disabled属性 Boolean true,false false
readonly 设置表单域的只读属性 Boolean true,false false
placeholder 设置表单域的placeholder属性 String — —
colspan 设置表单域的colspan占用列属性 Number 1 / 2 / 3 / 4 —
size 设置表单域的size属性 String medium / small / mini —
clear 设置表单域字典类型清空的回调方法 Function — —
blur 设置表单域失去焦点的回调方法 Function — —
focus 设置表单域获取焦点的回调方法 Function — —
rows 设置表单域textarea的rows属性 Number — —
autosize 设置表单域textarea的自适应内容高度，
可传入对象，如：
{ minRows: 2, maxRows: 6 }		 Boolean / Object — false
dicType 设置表单域字典类型的字典类别 String — —
dicRemote 设置表单域表选字典远程方法 Function — —
multiple 设置表单域字典类型是否可多选属性 Boolean true / false false
showLabel 设置表单域字典类型的显示label String — —
filtercode 设置表单域字典类型的过滤值属性
(按value过滤)		 String — —
cb 设置表单域字典类型选中的回调方法 Function — —
isreload 设置表选字典是否使用缓存 Boolean true / false false
options 设置级联字典的级联内容 Array — —
dateType 设置表单域日期类型的属性 String date / datetime / daterange /
year / month / week		 date
disabledDateFunc 设置表单域日期类型的禁用日期 Array — —
disabledDate 设置表单域日期类型的禁用状态，
参数为当前日期，要求返回 Boolean		 Function — —
editable 设置表单域日期类型输入框是否可编辑 Boolean true / false true
visible 设置表单域是否可见属性 Boolean true / false true
min 设置number类型输入框的最小值 Number — —
max 设置number类型输入框的最大值 Number — —
step 设置number类型输入框的步长 Number — —
precision 设置number类型输入框的数值精度 Number — —
defaultTime 设置时间输入框默认能够选择的时间 Array — —
lazy 设置级联字典是否懒加载 Boolean true / false false
lazyLoad 设置级联字典懒加载方法 Function — —
createRow 设置表单是否创建新行 Boolean true / false false
render 自定义表单域格式级样式 Function — —

# 版本

  • v1.3.8

← HtSearchBar查询按钮 →