ag-grid-vue树状结构

### 实现 ag-Grid Vue 中的树状结构 为了在 `ag-Grid` 和 `Vue` 中实现树状结构，开发者可以通过特定的数据模型和配置选项完成这一目标。`ag-Grid` 支持层次化数据展示，允许构建父子关系节点，从而形成树形视图。 #### 数据准备与配置 要显示树状结构，首先需要准备好具有父级引用或嵌套形式的数据集。每条记录应包含标识符字段以及指向其子项集合或者表示是否有子项的状态标志位。对于 `ag-Grid-Vue` 来说，在初始化表格实例之前设置好这些属性至关重要[^1]。 ```javascript data() { return { columnDefs: [ { field: "name", rowGroup: true, hide: true }, { field: "value" } ], autoGroupColumnDef: { headerName: '组织架构', cellRendererParams: { suppressCount: true, } }, rowData: [ { name: '部门A', value: null, children: [{ name: '员工1', value: 10 }] }, { name: '部门B', value: null, children: [] } // 叶子节点无需children属性也可 ] }; } ``` 上述代码片段展示了如何定义列(`columnDefs`)并指定哪些列为分组依据(`rowGroup`). 同时设置了自动创建的分组列(`autoGroupColumnDef`)用于呈现展开/折叠图标和其他交互元素. #### 展开与收起行为控制 为了让用户能够方便地操作树中的各个分支，默认情况下点击左侧的小三角即可触发对应行的展开或收缩动作。如果希望自定义此过程，则可通过监听 `rowExpanded` 或者 `rowCollapsed` 事件来进行处理[^2]. 此外还可以利用 `isRowSelectable` 函数决定某一行是否可选中；而当涉及到复杂的业务逻辑判断时，比如只有叶子结点才允许被勾选，那么就可以在此处加入相应的条件验证语句[^3]. #### 自定义渲染器增强用户体验 除了基本的功能外，有时还需要进一步美化界面效果或是增加额外的信息提示等功能。这时便可以借助于 `cellRendererFramework` 参数来自由定制单元格内的HTML内容。例如针对不同级别的节点应用不同的字体大小、颜色等样式变化，亦或是添加超链接跳转至详情页面等等[^4]. ```html <template> <div style="display:flex;align-items:center;"> {{ params.value }} <!-- 假设存在描述信息 --> <span v-if="params.data.description">{{ params.data.description }}</span> </div> </template> <script> export default { methods: { customCellRenderer(params) { const template = ` <custom-cell-renderer :params="params"></custom-cell-renderer>`; let eGui; new Vue({ el: document.createElement('div'), render(h){ return h(template); }, components:{ CustomCellRenderer:{/* ... */}, } }).$mount(eGui= document.createElement('div')); setTimeout(() => { if (eGui && !document.body.contains(eGui)) { document.body.appendChild(eGui); } }); return eGui; } } }; </script> ``` 以上示例演示了一个简单的自定义渲染器模板及其对应的脚本部分。注意这里采用了延迟挂载的方式确保DOM元素已经存在于文档流之中再执行后续操作。