typescript 如何在多数据表中呈现一个嵌套对象的属性,该属性位于一个数组内,而该数组位于另一个数组内?

dhxwm5r4  于 2023-03-19  发布在  TypeScript
关注(0)|答案(3)|浏览(160)
data: [{
       0: {
          item: {
              attributes: [
                  {0},
                  {1},
                   2: 
                       id: 1,
                       key:"Some String",
                       value: "23423"
            ]
        }  
    }
}]
{
            label: 'effectiveFrom',
            name: 'item.effectiveFrom',
            options: {
              filter: true,
              sort: true
            },
          },
          {
            label: 'Vendors',
            name: 'item.attributes[2].value',
            options: {
              filter: true,
              sort: true
            },
          }

上面是使用MuiDatatables的列及其选项,我以为使用item.attributes[2].value会输出字符串,但它没有
如果有人能帮忙,那将不胜感激!

n3ipq98p

n3ipq98p1#

像这样的东西可能有用吗?

{
  label: 'Vendors',
  name: 'item',
  options: {
    filter: true,
    sort: true,
    customBodyRender: (item, meta) => (<>${item.attributes[2].value}</>),
  },
}

但我认为MuiDataTables可能对已经被扁平化的数据有软需求。
来自文档:
用于描述表的数据。必须是包含值为字符串或数字的键/值对对象的数组,或者是字符串或数字数组(例如:数据:[{“名称”:“Joe”、“职位”:“水管工”、“年龄”:30},{“姓名”:“简”、“职务”:“电工”、“年龄”:45}]或数据:[[“Joe”,“Plumber”,30],[“Jane”,“Electrician”,45]])不支持将任意对象用作数据,并且已弃用。请考虑使用ID并Map到自定义呈现器中的外部对象数据,例如const data = [{“Name”:“Joe”、“对象数据”:123}] --〉常量数据到自定义渲染中的Map= { 123:{ foo:'酒吧',baz:'qux',... } }
在将其传递到表之前,您始终可以自己对其进行转换。

nxowjjhe

nxowjjhe2#

实际上,根据键选择对象,然后返回与该键关联的值

{
                label: 'Vendors',
                name: 'item.attributes',
                options: {
                  filter: true,
                  sort: true,
                  customBodyRender: (value: any) => {
            return value.map( (val: any, key: any ) => {
              if(val.key === "Some String") {
                return <Chip label={val.value} key={key}/>;
              }
            })
          }
                },
              }
k10s72fa

k10s72fa3#

只需在选项对象中添加enableNestedDataAccess: '.',这允许嵌套数据由“”分隔。

相关问题