在 oinone 平台中，提供了默认的左树右表的视图，用户可以通过界面设计器配置，默认的树视图不一定满足所有需求，尤其当需要自定义功能或复杂的交互时，我们可以通过自定义视图来实现更灵活的展现。
本文将带你一步步了解如何自定义左树右表视图中的树组件。
自定义树视图
1. 使用界面设计器配置视图
首先，我们需要通过界面设计器生成基础的左树右表视图。界面设计器允许用户根据不同需求进行拖拽配置，快速创建可视化界面。
配置完视图之后，我们可以重写左侧的树组件。Oinone 的默认树组件是 TableSearchTreeWidget，通过自定义的方式，我们可以实现更高级的功能。
2. 重写 TableSearchTreeWidget
import { BaseElementWidget, SPI, TableSearchTreeWidget, ViewType } from '@kunlun/dependencies';
import CustomTableSearchTree from './CustomTableSearchTree.vue';
@SPI.ClassFactory(
BaseElementWidget.Token({
viewType: [ViewType.Table, ViewType.Form],
widget: 'tree',
model: 'resource.k2.Model0000000100' // 改成自己的模型
})
)
export class CustomTableSearchTreeWidget extends TableSearchTreeWidget {
public initialize(props) {
super.initialize(props);
this.setComponent(CustomTableSearchTree);
return this;
}
}3. 定义 Vue 树组件
接下来，我们来实现 CustomTableSearchTree.vue 组件。这个组件将处理树的数据加载、节点选中等逻辑。你可以根据项目的需要修改其中的交互逻辑或 UI 设计。
<template>
<a-tree :load-data="onLoadData" :tree-data="treeData" @select="onSelected" />
</template>
<script lang="ts">
import { OioTreeNode, TreeUtils } from '@kunlun/dependencies';
import { computed, defineComponent } from 'vue';
export default defineComponent({
props: {
rootNode: {
type: Object
},
loadData: {
type: Function,
required: true
},
onSelected: {
type: Function,
required: true
}
},
setup(props) {
// // 计算树的数据源，使用 TreeUtils 处理
const treeData = computed(() => {
return TreeUtils.fillLoadMoreAction([...(props.rootNode?.children || [])]);
});
// 异步加载子节点
const onLoadData = async (node) => {
return await props.loadData(node.dataRef);
};
// 处理节点选中事件
const onSelected = (
selectedKeys: string[],
e: { nativeEvent: PointerEvent; node: { dataRef: OioTreeNode }; selected: boolean }
) => {
props.onSelected?.(e.node.dataRef, e.selected);
};
return {
treeData,
onLoadData,
onSelected
};
}
});
</script>4. 自定义 UI
如果你希望修改树组件的 UI，比如调整样式或交互方式，可以在 CustomTableSearchTree.vue 文件中根据需要进行调整。通过这个自定义组件，你可以灵活地控制树的外观和行为，满足具体的业务需求。
默认选择第一条数据
有时在使用树结构时，我们希望页面加载后默认选中第一条数据。为此，我们可以监听 treeData 的变化，并在数据加载完成时，自动触发选中第一条记录的操作。
const stop = watch(
() => treeData.value.length,
async (len) => {
if (!len) {
return;
}
// 选中树中的第一条记录
selectedKeys.value = [treeData.value[0].key];
props.onSelected?.(treeData.value[0].value.metadata, true);
stop(); // 停止监听
},
{
immediate: true
}
);表格的新建按钮，获取选中的树节点
在树组件中，我们希望右侧的表格的上方的 新建按钮 点击的时候，可以获取当前树的 ID 作为条件传递给后端。那么这个时候，我们需要通过自定义 action 的方式来实现。
Oinone社区 作者：汤乾华原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/18420.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
![[前端]平台内置的基类](https://doc.oinone.top/wp-content/themes/justnews/themer/assets/images/lazy.png)
