AG Grid技术问询：如何始终显示行前展开Chevron图标？

1. 给所有父行强制标记“可展开”状态 #

不管当前有没有子行，直接给父行数据加个组件能识别的标识（比如hasChildren: true）——绝大多数表格组件都会根据这个字段判断是否渲染展开图标：

• 用AG Grid的话，给父行加__hasChildren: true，组件就会默认显示展开箭头；
• 用Element UI TreeTable的话，给父行设children: []空数组，同时开启lazy模式，就算没子数据也会显示箭头。

2. 自定义展开图标渲染逻辑 #

如果组件默认不支持强制显示，就自己写单元格渲染器：

• 直接绘制展开/折叠图标（用SVG或者现成的字体图标都行），不管该行有没有子行都显示；
• 给图标绑定点击事件，触发你已经实现的onRowGroupOpened加载逻辑；
• 加个isLoading标记，点击时先判断是否正在加载，避免重复发请求；加载完子数据后，再切换图标状态（展开变折叠）。

3. 利用组件自带的强制配置 #

不少组件有现成的配置项能强制显示图标：

• AG Grid可以在gridOptions里配合rowNode.setExpanded()，或者自定义展开列的渲染规则；
• Ant Design Table树形结构可以设置treeProps={{ showIcon: true }}，哪怕没子节点也会显示图标，然后通过onExpand触发懒加载。

举个AG Grid的简单示例：

// 初始化数据时给所有父行加可展开标记
const initialData = rawData.map(row => ({
  ...row,
  __hasChildren: true // 强制让组件认为该行可展开
}));

const gridOptions = {
  onRowGroupOpened: (params) => {
    // 避免重复加载
    if (params.node.childrenAfterGrouping.length || params.node.isLoading) return;
    
    params.node.setLoading(true);
    // 向后端请求子数据
    fetch(`/api/group-data?groupId=${params.node.data.id}`)
      .then(res => res.json())
      .then(childData => {
        params.node.setData({ ...params.node.data, children: childData });
        params.node.setLoading(false);
      });
  }
};

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