Gitee
Appearance
Tree View 树列表组件
Tree View 组件以树形式展现层级结构数据。
基本用法
勾选树节点
自动勾选节点
显示图标
显示动态图标
树节点图标来源于绑定数据，由属性iconField指定。
显示连接线
获取返回值
合并返回值
当选择多条数据时，将具有相同父节点的返回值合并，仅返回共有的父节点
增加和删除树节点
选中数据变化事件
TreeView
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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 | () => {} | 自定义分组合计内容 |
TreeView 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 }) | 展开树节点事件 |
TreeView API
有些场景下，需要主动触发组件API来实现数据或模板的更新，比如更新数据、更新列对象等，以下是data grid组件实例的方法
| 方法名 | 参数 | 说明 |
|---|---|---|
| updateDataSource | data: Record<string, any>[] | 更新数据 |
| updateColumns | columns: DataColumn[] | 更新列 |
| selectItemByIds | dataItemIds: string[] | 选中行 |
| unSelectItemByIds | dataItemIds: string[] | 取消选中行 |
| clearSelection | 无 | 清空选中行 |
| removeDataItem | dataIndex: number | 根据索引删除行 |
| removeDataItemById | dataItemId: string | 根据标识删除行 |
插槽
TIP
暂无内容