DataGrid配置列时如何绑定嵌套对象的子元素属性

你之前直接用sub.firstSub、sub/firstSub作为field的写法无法生效，是因为DataGrid默认会直接把field的取值作为行对象的一级键名读取值，等价于执行row['sub.firstSub']、row['sub/firstSub']，不会自动做路径解析，自然读不到嵌套对象的属性。

最灵活的方式是使用列配置的valueGetter属性手动指定取值逻辑，field仅需保证是整个列配置数组中的唯一标识，不需要对应行对象的真实键名。

参考代码 #

const columns = [
  { field: 'first', headerName: 'First', width: 70 },
  {
    // field只要全局唯一即可，可自定义命名，避免和其他列的field冲突
    field: 'sub_firstSub',
    headerName: 'Sub One',
    width: 70,
    // 从参数中解构出行对象，直接读取嵌套属性
    valueGetter: ({ row }) => row.sub.firstSub
  },
  {
    field: 'sub_secondSub',
    headerName: 'Sub Two',
    width: 130,
    valueGetter: ({ row }) => row.sub.secondSub
  }
];

容错处理 #

如果存在行数据没有sub字段的情况，可以在取值时加可选链避免页面报错：

valueGetter: ({ row }) => row.sub?.firstSub

也可以提前对行数据做拍平处理，把嵌套属性直接提取为一级字段，比如把原数据处理为{ first: 'firstValue', second: 'secondValue', firstSub: 'xxx', secondSub: 'xxx' }结构，之后就可以直接用普通的field配置列，不需要额外写valueGetter。

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