如何在Odoo中实现树形视图侧边导航面板？

你看到的Chart of Accounts侧边导航，是Odoo会计模块从15版本开始封装的通用OWL组件，16、17版本补全了折叠动画、层级缩进、快速搜索等交互，不需要从零开发样式和逻辑，直接复用组件即可实现完全一致的效果。

1. 模块依赖配置 #

• 如果你的业务场景允许依赖会计模块，直接在自定义模块的__manifest__.py中，将account加入depends列表即可直接调用组件
• 如果不想引入整个会计模块依赖，可以直接把组件源码拷贝到你的自定义模块对应路径下，组件源文件位置：account/static/src/components/report_sidebar/，拷贝后不需要额外改依赖

2. 视图层引入组件 #

在你的自定义OWL视图模板中直接引入组件，布局和会计科目表保持左右分栏即可，示例代码：

<t t-name="your_module.CustomView">
  <div class="o_content d-flex h-100">
    <!-- 侧边导航栏 -->
    <AccountReportSideBar
      t-props="sidebarConfig"
      t-on-sidebar-action="onNavClick"
    />
    <!-- 右侧主内容区 -->
    <div class="flex-grow-1 p-3 overflow-auto">
      <!-- 主业务内容放在此处 -->
    </div>
  </div>
</t>

3. 逻辑层配置参数 #

在对应视图的JS逻辑中注册组件，传入配置参数即可匹配会计科目表的交互效果，核心配置说明：

/** @odoo-module **/
import { Component, useState } from "@odoo/owl";
// 依赖account模块时直接引入，拷贝源码的话改成本地组件路径即可
import { AccountReportSideBar } from "@account/components/report_sidebar/report_sidebar";

export class CustomView extends Component {
  static template = "your_module.CustomView";
  static components = { AccountReportSideBar };

  setup() {
    this.state = useState({
      activeNavId: null,
      // 导航数据结构和会计科目表完全对齐
      navSections: [
        {
          name: "全部导航",
          collapsible: true, // 开启分组折叠，和科目表分组收展逻辑一致
          items: [
            {
              id: 1,
              name: "资产类",
              level: 0, // 层级数，控制缩进距离
              children: [
                { id: 11, name: "流动资产", level: 1 },
                { id: 12, name: "非流动资产", level: 1 }
              ]
            },
            { id: 2, name: "负债类", level: 0 }
          ]
        }
      ]
    });
  }

  // 传给侧边栏的配置
  get sidebarConfig() {
    return {
      sections: this.state.navSections,
      selectedItems: this.state.activeNavId ? [this.state.activeNavId] : [],
      searchEnabled: true, // 开启顶部搜索框，支持快速过滤导航项
      showHierarchy: true, // 开启层级缩进效果
      collapsible: true // 开启整个侧边栏折叠收起为窄栏的效果
    }
  }

  // 导航项点击事件处理
  onNavClick(ev) {
    const { item, action } = ev.detail;
    // action枚举值：select=点击选中导航项、unfold=点击展开/折叠子层级
    if (action === "select") {
      this.state.activeNavId = item.id;
      // 此处编写选中导航项后，右侧主内容的刷新逻辑
    }
  }
}

注意事项 #

• 组件自带所有交互和样式：选中态高亮、折叠动画、搜索过滤、层级展开/收起、侧边栏整体收窄为图标栏的效果都已经内置，不需要额外写CSS
• Odoo14及更早版本没有这个封装组件，当时的会计科目表侧边栏是硬编码在视图中的逻辑，如果是低版本适配，需要把15+版本的组件拷贝后调整OWL语法适配老版本框架即可

内容的提问来源于stack exchange，提问作者Ehab