# 低代码控件介绍

# 列表控件

# 表格

拖拽左侧表格控件到中间画布中，选中画布中的表格控件，右侧可对表格进行属性、事件、样式等配置。

# 控件预览

# 基础配置

属性	配置描述
控件标识	控件的唯一标识
权限标识	控件的权限标识，用于页面元素权限控制
是否开启搜索	开启搜索，左侧画布会多出一块搜索块区域，用于配置搜索项
是否开启工具栏按钮区	开启/关闭工具栏按钮
是否开启分页	开启/关闭分页
是否开启选择展示列	开启/关闭选择展示列

# 搜索配置

在基础配置里开启搜索。
点击中间画布中的内联表单块，此区域用于放置搜索项。选中此区域，右侧进行值绑定，操作同表单的值绑定。快速填充时添加上搜索和重置按钮。

# 工具栏按钮配置

在基础配置里开启工具栏按钮区。
点击中间画布中的表格工具栏块，此区域用于放置工具栏按钮。选中此区域，右侧可添加按钮。

按钮配置详见按钮

# 分页配置

详见属性配置。

# 值绑定

选中画布中的表格，右侧展开值绑定面板。数据来源类型目前有两种：查询管理和本地接口。

查询管理
- 数据来源：从查询管理里选择一条数据。查询管理配置详见：查询管理新增（链接待处理）。
- 行数据key：列表行数据唯一标识字段，当配置列表修改、删除时会默认传此参数。
- 从数据来源添加：添加列表展示列，来源于查询管理的查询字段。

本地接口
- 接口地址：配置本地接口访问的url。
- 请求方式：GET/POST。
- 行数据key：列表行数据唯一标识字段，当配置列表修改、删除时会默认传此参数。

# 表格添加列

表格数据来源如果来源于查询管理，可点击从数据来源添加列

表格数据来源如果来源于本地接口，需要自己手动添加列

表头列的列类型有4种：选择列、索引列、普通列、操作列。操作列里可以配置操作按钮。

# 表格设计列

点击列设计按钮，可以对表格列进行属性配置。详见属性配置。

操作列可以添加按钮，详见按钮配置。

# 大小设置

设置表格最大高度、固定宽度、固定高度。

# 属性配置

详见属性配置。

# 事件配置

详见事件配置。

除HosUI组件库里定义的表格事件外，还有以下事件：

事件	描述	使用示例
beforeQuery	查询之前调用的钩子，可用于对查询参数的组装

# 方法

除HosUI组件库里定义的表格方法外，还有以下方法：

事件	描述	使用示例
表格数据更新方法	此方法会使表格重新加载数据。	`javascript //通过uid(控件标识)单独更新某个表格，如：table uid 设为 a-table context.$store.commit('UPDATE_TABLE',{_uid: 'a-table'})`

# 样式配置

详见样式配置。

# 子表格-列表

# 控件预览

行内编辑展示如下图：

弹框编辑展示如下图：

# 基础配置

属性	配置描述
控件标识	控件的唯一标识
权限标识	控件的权限标识，用于页面元素权限控制
编辑类型	行内编辑/弹框编辑
是否显示选择列	开启/关闭选择列
是否显示索引列	开启/关闭索引列
是否开启工具栏	开启/关闭工具栏
是否开启操作列	开启/关闭操作列
弹框表单列数	当为弹框编辑时，弹框表单展示几列
弹框表单label宽度	当为弹框编辑时，弹框表单的表单项宽度

# 值绑定

详情见表单的值绑定。

子表格的值绑定只能绑定子表模型。

# 子表格添加列

点击值绑定面板里的快速填充列。

# 子表格设计列

选中表格列，右侧配置表格列的属性，属性配置详见属性配置。

# 属性配置

详见属性配置。

# 工具栏配置

按钮添加详见按钮配置。

# 操作列配置

按钮添加详见按钮配置。

# 事件配置

详见事件配置。

# 样式配置

详见样式配置。

# 子表格-表单

# 控件预览

# 基础配置

属性	配置描述
控件标识	控件的唯一标识
权限标识	控件的权限标识，用于页面元素权限控制
编辑类型	行内编辑/弹框编辑
是否显示复选框	开启/关闭选择复选框
是否开启顶部工具栏	开启/关闭顶部工具栏
是否开启底部工具栏	开启/关闭底部工具栏

# 值绑定

详情见值绑定。

# 属性配置

详见属性配置。

# 工具栏配置

按钮添加详见按钮配置。

# 操作列配置

按钮添加详见按钮配置。

# 事件配置

详见事件配置。

# 样式配置

详见样式配置。

# 编辑表格

# 控件预览

编辑表格支持多行编辑和初始化等操作：

# 基础配置

属性	配置描述
控件标识	控件的唯一标识
权限标识	控件的权限标识，用于页面元素权限控制
是否显示选择列	开启/关闭选择列，可以控制显示的顺序
是否显示索引列	开启/关闭索引列，可以控制显示的顺序
是否开启工具栏	开启/关闭工具栏
是否开启操作列	开启/关闭操作列，可以控制显示的顺序

# 值绑定

详见值绑定

# 属性配置

详见属性配置

# 事件配置

事件名称	事件描述
before-query	表格数据查询前触发，参数pageModel、当前vue实例、表格查询参数params，可用添加额外的查询参数
loading-completed	表格数据查询后触发，，参数pageModel、当前vue实例、表格查询参数params，可用默认行选中等操作
created	组件创建时触发

其他事件详见事件配置。

# 样式配置

详见样式配置

# 工具栏配置

按钮添加详见按钮配置。

# 操作列配置

按钮权限控制函数：可配置函数来控制操作了按钮的显示|隐藏，未配置函数或者函数返回true，按钮显示，否则按钮隐藏。按钮添加详见按钮配置。

# 表格列显示字段说明

下拉等控件绑定的值一般是id，但是在表格处于非编辑态的时候，需要显示name，这时就可以为当前列绑定name字段用于展示。

# 事件写法和内置方法

初始化：配置事件created，该事件有一个上下文context参数，通过操作pageModel来实现表格初始化行数据：row，里面需要默认两个字段editFlag（编辑态）operationStatus（操作列显示态），初始化时需要包含。

addRow：新增一行，通过context调用，可选参数row，需要和模型对齐

deleteRow：删除一行或者多行，参数是一个数组[row,...rows]

setPageElementsAuth：控制元素的禁用 | 隐藏 | 显示，有两个参数，第一个控件标识，第二个参数index用于编辑表格，可以在控件的上下文manualIndex中获取到。

获取当前行：manualModel表示当前行的引用。

上下文对象都是vue实例，可以使用日志查看对应的属性和方法。

属性	配置描述
show-data	穿梭表格回显的数据
dialog-title	穿梭表格的弹窗标题，默认为"穿梭表格"
dialog-width	穿梭表格弹窗的宽度，默认60%
dialog-height	穿梭表格弹窗内容区的高度，不包含头部和底部
label-key	穿梭表格选项的label字段，默认"name"
value-key	穿梭表格选项的value字段，默认"id"
multiple	穿梭表格是否多选，默认多选
title	穿梭表格弹窗右侧选择数据的标题，默认为"已选数据"
placeholder	占位符
disabled	是否禁用
height	Table的高度，默认为自动高度。如果height为number类型，单位px；如果height为string类型，则这个高度会设置为Table的style.height的值，Table的高度会受控于外部样式。
max-height	Table的最大高度。合法的值为数字或者单位为px的高度。
stripe	是否为斑马纹table
border	是否带有纵向边框
size	Table的尺寸,可选值:large / small
fit	列的宽度是否自撑开
show-header	是否显示表头
highlight-current-row	是否要高亮当前行
current-row-key	当前行的key，只写属性
row-class-name	行的className的回调方法，也可以使用字符串为所有行设置一个固定的className。
row-style	行的style的回调方法，也可以使用一个固定的Object为所有行设置一样的Style。
cell-style	单元格的style的回调方法，也可以使用一个固定的Object为所有单元格设置一样的Style。
cell-class-name	单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。
header-row-class-name	表头行的className的回调方法，也可以使用字符串为所有表头行设置一个固定的className。
header-cell-class-name	表头单元格的className的回调方法，也可以使用字符串为所有表头单元格设置一个固定的className。
header-cell-style	表头单元格的style的回调方法，也可以使用一个固定的Object为所有表头单元格设置一样的Style。
empty-text	空数据时显示的文本内容
default-expand-all	是否默认展开所有行，当Table包含展开行存在或者为树形表格时有效
expand-row-keys	可以通过该属性设置Table目前的展开行，需要设置row-key属性才能使用，该属性为展开行的keys数组。
default-sort	默认的排序列的prop和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序
tooltip-effect	tooltipeffect属性;可选值:dark/light

属性	配置描述
node-enable-select	树节点是否可选中，函数返回true表示可选中，false表示不可选中
invert	穿梭树选择以及反显优先匹配的字段，默认值id
is-multiple	是否多选
label-key	穿梭树回显时显示的label字段key，默认name
value-key	穿梭树回显时显示的值字段key，默认id，优先级低于invert
title	穿梭树弹框显示的标题，默认值"标题"
tree-title	穿梭树弹框左侧树标题，默认值"树标题"
placeholder	穿梭框提示语，默认值"列表"
loading	穿梭框搜索是否正在从远程获取数据（同select组件），穿梭框弹窗保存时的加载效果，默认值false
dialogUID	穿梭框弹窗的uid
lazy	穿梭框弹窗左侧的树是否异步加载，默认值true
showLinkage	穿梭框弹窗左侧的树是否父子联动选中，默认值false
remote	穿梭框是否为远程搜索，默认值true
showData	穿梭框回显时select的options数据
disabled	穿梭框是否禁用，默认值false
display-save	穿梭框弹窗是否显示保存按钮，默认值false

事件	事件描述	回调参数
submit	穿梭树节点提交时触发	选择的树节点对象
input	穿梭树值改变时触发	选择的值，根据invert匹配
dataChange	穿梭树值改变时触发	选择的树节点对象
change	当选择项发生变化时会触发该事件	选择的数据

接口	接口描述
搜索接口	穿梭树slelect组件、弹窗顶部搜索时触发的接口，详见穿梭树搜索接口配置
树接口	弹窗下方左侧的树获取接口，详见穿梭树树接口配置

属性	配置描述
topTitle	五方布局顶部区域标题内容
leftTitle	五方布局左侧区域标题内容
centerTitle	五方布局中部区域标题内容
rightTitle	五方布局右侧区域标题内容
bottomTitle	五方布局底部区域标题内容
topShowIcon	是否显示顶部区域展开/折叠按钮
leftShowIcon	是否显示左侧区域展开/折叠按钮
rightShowIcon	是否显示右侧区域展开/折叠按钮
bottomShowIcon	是否显示底部区域展开/折叠按钮
height	五方布局组件整体高度，默认100%
middleHeight	中间区域的高度，默认则取剩余高度
clickExpand	点击展开与否。为true时，展开区域不再悬浮。默认值false
showCollapsedTitle	在区域面板处于折叠状态的时候是否显示title。默认值false

属性	配置描述
按钮业务类型	表格按钮：新增/修改/删除/查看/导入/导出/数据日志/生命周期/自定义表单按钮：取消/保存/表单重置/自定义表单搜索：搜索/重置/自定义
按钮类型	文字按钮/图标按钮
是否展示图标	是/否
按钮图标	文字按钮前展示的图标，详见HOSUI里的图标 (opens new window)
按钮名称	按钮名称

# 低代码控件介绍

# 列表控件

# 表格

# 控件预览

# 基础配置

# 搜索配置

# 工具栏按钮配置

# 分页配置

# 值绑定

# 表格添加列

# 表格设计列

# 大小设置

# 属性配置

# 事件配置

# 方法

# 样式配置

# 子表格-列表

# 控件预览

# 基础配置

# 值绑定

# 子表格添加列

# 子表格设计列

# 属性配置

# 工具栏配置

# 操作列配置

# 事件配置

# 样式配置

# 子表格-表单

# 控件预览

# 基础配置

# 值绑定

# 属性配置

# 工具栏配置

# 操作列配置

# 事件配置

# 样式配置

# 编辑表格

# 控件预览

# 基础配置

# 值绑定

# 属性配置

# 事件配置

# 样式配置

# 工具栏配置

# 操作列配置

# 表格列显示字段说明

# 事件写法和内置方法

# 表单控件

# 单行文本

# 基础配置

# 值绑定

# 属性配置

# 事件配置

# 样式配置

# 多行文本

# 基础配置

# 值绑定

# 属性配置

# 事件配置

# 样式配置

# 关键词

# 基础配置

# 值绑定

# 选项配置

# 属性配置

# 事件配置

# 样式配置

# 单选框

# 基础配置

# 值绑定

# 选项配置

# 属性配置

# 事件配置

# 样式配置

# 单选框组

# 基础配置

# 值绑定

# 选项配置

# 属性配置

# 事件配置