reactjs - 如何通过第一次渲染将所选状态放入树数据中

Question

我使用材料表，我想用材料表树数据渲染权限树

我的数据可能是这样的

[
    {
      id: 1,
      name: 'a',
      type: 'adult',
      selected:true,
    },
    {
      id: 2,
      name: 'b',
      parentId: 1,
      selected:true,
    },
    {
      id: 3,
      name: 'c',
      parentId: 1,
      selected:true,
    },
    {
      id: 4,
      name: 'd',
      parentId: 3,
      selected:false
    },
    {
      id: 5,
      name: 'e',
      selected:false
    }
]

以及如何控制选中的左侧复选框

表格截图

Answer 1

您应该为 MaterialTable 提供一个函数，以了解如何设置父级。对于您的示例：

<MaterialTable
parentChildData={(row, rows) => rows.find(a => a.id === row.parentId)}
....
/>

要使行默认选中：

{ id: 5, name: 'e', tableData: { checked: true } }

Answer 2

我读了一些问题，我发现我可以在 MaterialTable 中设置“tableRef”并在第一时间设置检查状态，谢谢你

<MaterialTable
    tableRef={this.tableRolesRef}  //this.tableRolesRef=React.createRef();
    columns={[
        {title:"viewname",field:"viewname",sorting:false},
        {title:"modelname",field:"modelname",sorting:false,cellStyle:{whiteSpace:'nowrap'}},
        {title:"parentid",field:"parentid",sorting:false},
        {title:"id",field:"id",sorting:false},
        {title:"filename",field:"filename",sorting:false},
        {title:"version",field:"version",sorting:false},

    ]}
    actions={[
        {
            icon:'toggle_on',
            tooltip:'open',
            onClick:(event,rows)=>{console.log(rows,this.tableRef)}
        }
    ]}
    data={modules}
    title="permission"
    parentChildData={(row, rows) => rows.find(a => a.id === row.parentid)}
    onSelectionChange={data=>{console.log(data)}}
    options={{
        actionsColumnIndex:-1,
        toolbar:true,
        paging:true,
        selection:true
    }}
    localization={{...localization}}
/>

并在 componentDidMount 中得到我的回应

        redFetch(`rolepermission?roleid=${id}`)
            .then(res=>{
                this.setState({rolepermission:res})
                console.log(res)
                let renderData=this.tableRolesRef.current.state.renderData
                //renderData[0].tableData.checked=true
                //this.tableRolesRef.current.setState({renderData}) ←that is what i want to set
                console.log(this.tableRolesRef)

            })