2025年react+AntDesign实现个性树形数据表格

科技前沿 • 2025-03-08 08:28 • 阅读 28

大家好，我是讯享网，很高兴认识大家。

树形结构数据表格
1：实现效果
在这里插入图片描述
讯享网
2：需求分析，
2-1.UI设计原型表格为组织结构
2-2.含有子节点的组织不能选择,单选按钮为禁用状态
2-3.默认展开所有组织结构
2-4.只有一级组织显示展开按钮
2-5.期望在选择后带回当前所选择组织的全结构即可选组织为为三级时应该带回全1，2，3级。
2-6.后台存储需要id:id/id/id.

 data :[ { 
    key: 1, name: 'John', child:true, onpenIcon:true, id:1, children: [ { 
    key: 11, ej: 'John1-1', prantId:1, prantName:'John', child:false, onpenIcon:false, }, { 
    key: 12, ej: 'John1-1.', child:true, onpenIcon:false, id:1.1, prantId:1, prantName:'John', children: [ { 
    key: 121, sj: 'John1-1.-1', prantId:1.1, prantName:'John1-1.', }, ], }, ], }, { 
    key: 2, name: 'Joe Black', id:2, child:false, onpenIcon:true, //标识是否带有展开图标 }, ]

讯享网

3-2 字段说明：
onpenIcon:true , //标识是否带有展开图标 child:false //是否含有子节点 prantId:1.1, prantName:'John1-1.', 上级父节点信息

4.核心代码区

讯享网 <Table defaultExpandAllRows={ 
   true} columns={ 
   this.state.columns} dataSource={ 
   this.state.dataaa} rowSelection={ 
   { 
    type:'radio',onChange:this.onChange,onSelect:this.onSelect,getCheckboxProps:this.getCheckboxProps}} expandIcon={ 
   this.expandIcon} /> /* * 设置表格展开图标样式 * / expandIcon=(expanded,onExpand,record)=>{ 
    return ( expanded.record.onpenIcon?<Icon type="down" style={ 
   { 
   fontSize:"10px",marginRight:'3px'}}/>:"" ) } /* * 设置表格单选状态 * / getCheckboxProps=(record)=>{ 
    return { 
    disabled: record.child ===true, // 配置默认禁用的选项 含有孩子节点的字段名称为child =true }; } /* * 多选类型时候使用 多选类型改变表格下部type 为checkbox * */ onSelectAll= (selected, selectedRows, changeRows) => { 
    console.log(selected, selectedRows, changeRows); } /* * 单，多选类型时候使用 多选类型改变表格下部type 为checkbox，单选为radio * */ onSelect=(record, selected, selectedRows) => { 
    //选中某一行时使用，这里存放的是当前选中的行的信息 console.log(record, selected, selectedRows); } /* * 单，多选类型时候使用 * */ onChange= (selectedRowKeys, selectedRows) => { 
    console.log(`selectedRowKeys: ${ 
     selectedRowKeys}`, 'selectedRows: ', selectedRows); }

2025年react+AntDesign实现个性树形数据表格

相关推荐