Tree Grid 树列表组件

Tree View 组件以树形式展现层级结构数据。

基本用法

绑定树结构数据

禁用

尺寸

自定义样式

行号

启用选择行

勾选复选框选择行

勾选树节点

自动勾选节点

多选模式

选择数据范围

设置选中数据

显示全选

显示边框

显示配置按钮

显示滚动条

显示条纹

显示图标

显示连接线

新建和删除

行编辑

绑定数据

设置列

自适应列宽

空数据模板

异步加载数据

TreeGrid

属性	类型	默认值	说明
customClass	`string`	--	自定义表格class,空格分隔
data	`Object`	`[]`	绑定数据，可以设置TreeNode类型
columns	array<TreeGridColumn>	`[]`	列属性
hierarchy	HierarchyOptions	`{ hasChildrenField: 'hasChildren', layerField: 'layer', parentIdField: 'parent' }`	分级信息
treeNodeIconsData	Object	`{}`	树节点图标数据
showTreeNodeIcons	`Boolean`	`false`	是否显示图标集
showLines	`Boolean`	`false`	是否显示连接线
newDataItem	`Object`	-	新增值,是个对象类型，结构与data的每一项结构一致，但是不能是TreeNode类型
idField	`String`	'id'	标识字段
disabled	`boolean`	false	禁用
fit	`boolean`	false	适配父组件尺寸
height	`number`	-	高度
width	`number`	-	宽度
minHeight	`number`	300	最小高度
minWidth	`number`	400	最小宽度
mergeCell	`boolean`	false	纵向合并具有相同值的单元格
showFooter	`boolean`	false	显示底部面板
showHeader	`boolean`	true	显示顶部面板
showScrollBar	`boolean`	auto	显示滚动条
showSetting	`boolean`	false	显示列设置按钮
showBorder	`boolean`	false	显示边框
showStripe	`boolean`	false	显示条纹，也叫斑马线样式
virtualized	`boolean`	true	启用虚拟渲染
columnOption	ColumnOptions	`{fitColumns: false,fitMode: 'none'}`	列布局配置
commandOption	CommandOptions	`{enable: false,commands: []}`	列配置
rowNumber	RowNumberOptions	`{enable: true,width: 32,heading:'序号'}`	行号配置
rowOption	RowOptions	`{wrapContent: false, height: 28}`	行配置，height和wrapContent属性暂不生效
selection	SelectionOptions	`{enableSelectRow: true,multiSelect: false,multiSelectMode: 'DependOnCheck',showCheckbox: false,showSelectAll: false}`	选中行配置
summary	SummaryOptions	{enable: true, groupFields: ['numericField1', 'numericField2']}	合计配置

TreeNodeIconsData

属性	类型	默认值	说明
fold	`string`	--	折叠时图标class
unfold	`string`	--	展开时图标class
leafnodes	`string`	--	叶子节点图标class

HierarchyOptions

属性	类型	默认值	说明
collapseField	`string`	--	自定义的收折状态属性
hasChildrenField	`string`	--	自定义的包含子节点状态属性
parentIdField	`string`	--	自定义的父节点标识属性
cascadeOption	CascadeOptions	--	选中行级联配置

CascadeOptions

属性	类型	默认值	说明
autoCheckParent	`boolean`	--	选中行自动级联父级
autoCheckChildren	`string`	--	选中行自动级联子级
autoCancelParent	`string`	--	自动取消父级，与前两个属性配合使用
selectionRange	`string`	--	选择结果范围

TreeNode

属性	类型	默认值	说明
id	`string`	--	行数据标识属性，如果不设置，请在组件设置属性idField用于指定标识属性名
children	`array<TreeNode>`	--	子节点集合
hasChildren	`boolean`	--	是否存在子节点，懒加载数据时很有用

TreeGridColumn

属性名	类型	默认值	说明
dataType	`string`	string	数据类型
editor	`EditorConfig`	`{type: 'input-group'}`	编辑器配置
field	`string`	--	列标识
title	`string`	--	列标题
width	`number,string`	120	列宽度
align	`string`	left	文本水平对齐方式，分为left,center,right三种
valign	`string`	top	文本垂直对齐方式，分为top,middle,bottom三种
fixed	`string`	false	是否固定列，分为left和right两种
visible	`boolean`	true	是否显示
readonly	`boolean`	false	是否只读
showTips	`boolean`	false	鼠标移动至单元格后，显示悬浮消息
sortable	`boolean`	false	是否排序
resizable	`boolean`	true	是否伸缩
filterable	`boolean`	false	是否筛选
formatter(cell: VisualDataCell, visualDataRow: VisualData)	`function`	无默认值，可选属性	格式化函数,函数返回值为VNode 或者string类型

RowOptions

属性	类型	默认值	说明
customRowStyle(data:any)	`function`	空函数	自定义行样式函数，参数为行数据
showHovering	`boolean`	true	鼠标滑过行效果

ColumnOptions

属性	类型	默认值	说明
fitColumns	`boolean`	false	自动列宽。设为true后，所有列将填满表格并不会出现横向滚动条。
fitMode	`string`	average	自动适配列宽度模式,'none'或'average'或'expand'或'percentage'
groups	`array<ColumnGroupItem>`	[]	分组, ColumnGroupItem结构是field（列标识）,title（标题）和group（ColumnGroupItem结构）
reorderColumn	`boolean`	false	允许拖动表头改变列显示顺序

SelectionOptions

属性	类型	默认值	说明
checkOnSelect	`boolean`	false	用多选且显示checkbox, 选中行后勾选前面的checkbox
clearSelectionOnEmpty	`boolean`	true	当数据源为空时，清空已选记录
keepSelectingOnClick	`boolean`	true	允许重复点击行是保留选中状态
selectOnCheck	`boolean`	false	启用多选且显示checkbox, 勾选后并且选中行
enableSelectRow	`boolean`	true	允许选中行
multiSelect	`boolean`	false	启用多选
showCheckbox	`boolean`	false	每行前边显示复选框
showSelectAll	`boolean`	false	显示全选复选框

SummaryOptions

属性	类型	默认值	说明
enable	`boolean`	false	启用合计行
customSummaryStyle	`function`	() => {}	合计行自定义样式，对启用合计行模板无效
groupFields	`array<string>`	[]	分组合计字段
mode	`string`	client	合计交互模式，可以选择client和server两个值
position	`string`	false	合计行显示位置，可以选择bottom、top和both三个值

CommandOptions

属性	类型	默认值	说明
enable	`boolean`	false	启用操作列
commands	`array<ColumnCommand>`	-	操作列命令集合

ColumnCommand

属性	类型	默认值	说明
type	`string`	-	类型，与button组件type一致
text	`string`	-	名称
command	`string`	-	四种类型，编辑（edit）、删除（remove）、确定（accept）、取消（cancel）
hidden	`boolean`	false	是否隐藏
icon	`string`	-	图标类选择器名称，如f-icon
onClick	`function`	-	触发事件

SortOptions

属性	类型	默认值	说明
mode	`string`	client	合计交互模式，可以选择client和server两个值

RowNumberOptions

属性	类型	默认值	说明
enable	`boolean`	false	启用行号
heading	`string`	序号	双击行事件
width	`number`	36	行号宽度

GroupOptions

属性	类型	默认值	说明
enable	`boolean`	false	启用数据分组
groupFields	`array<string>`	[]	行数据分组字段；多字段分组以英文逗号分隔
showGroupedColumn	`boolean`	true	在DataGrid中显示被分组的列
showGroupPanel	`boolean`	false	显示分组面板
showSummary	`boolean`	false	启用合计行
customSummaryStyle	`function`	() => {}	自行分组合计行样式
customGroupRowStyle	`function`	() => {}	自定义分组行样式
customGroupRow	`function`	() => {}	自定义分组合计内容

TreeGrid Event

事件名	参数	说明
clickRow	`Function(index,dataItem)`	点击行事件
dblclickNode	`Function(param: {event,dataItem})`	双击行事件
selectionChange	`Function(selectedRawList)`	已选数据切换事件
unSelectItem	`Function(unSelectedData)`	取消选中行事件
selectItem	`Function(unSelectedData)`	选中行事件
filterChanged	`Function(conditions: { filterConditions, sortConditions})`	服务端过滤事件
sortChanged	`Function(conditions: { filterConditions, sortConditions})`	服务端排序事件
expandNode	`Function(param: { row })`	展开树节点事件

TreeGrid API

有些场景下，需要主动触发组件API来实现数据或模板的更新，比如更新数据、更新列对象等

方法名	参数	说明
updateDataSource	`data: Record<string, any>[]`	更新数据
updateColumns	`columns: DataColumn[]`	更新列
selectItemByIds	`dataItemIds: string[]`	选中行
unSelectItemByIds	`dataItemIds: string[]`	取消选中行
clearSelection	`无`	清空选中行
removeDataItem	`dataIndex: number`	根据索引删除行
removeDataItemById	`dataItemId: string`	根据标识删除行

插槽

TIP

暂无内容

Tree Grid 树列表组件 #

基本用法 #

绑定树结构数据 #

禁用 #

尺寸 #

自定义样式 #

行号 #

启用选择行 #

勾选复选框选择行 #

勾选树节点 #

自动勾选节点 #

多选模式 #

选择数据范围 #

设置选中数据 #

显示全选 #

显示边框 #

显示配置按钮 #

显示滚动条 #

显示条纹 #

显示图标 #

显示连接线 #

新建和删除 #

行编辑 #

绑定数据 #

设置列 #

自适应列宽 #

空数据模板 #

异步加载数据 #

异步加载数据 #

TreeGrid #

TreeNodeIconsData #

HierarchyOptions #

CascadeOptions #

TreeNode #

TreeGridColumn #

RowOptions #

ColumnOptions #

SelectionOptions #

SummaryOptions #

CommandOptions #

ColumnCommand #

SortOptions #

RowNumberOptions #

GroupOptions #

TreeGrid Event #

TreeGrid API #

插槽 #

Tree Grid 树列表组件

基本用法

绑定树结构数据

禁用

尺寸

自定义样式

行号

启用选择行

勾选复选框选择行

勾选树节点

自动勾选节点

多选模式

选择数据范围

设置选中数据

显示全选

显示边框

显示配置按钮

显示滚动条

显示条纹

显示图标

显示连接线

新建和删除

行编辑

绑定数据

设置列

自适应列宽

空数据模板

异步加载数据

异步加载数据

TreeGrid

TreeNodeIconsData

HierarchyOptions

CascadeOptions

TreeNode

TreeGridColumn

RowOptions

ColumnOptions

SelectionOptions

SummaryOptions

CommandOptions

ColumnCommand

SortOptions

RowNumberOptions

GroupOptions

TreeGrid Event

TreeGrid API

插槽