React antd的table表格之嵌套表格

React antd的table表格之嵌套表格

最近做了几个pc端的后台管理需求，涉及了table中的嵌套表格，嵌套的子表格大体分为两种效果：

• 效果1-----点击展开新的子表格，旧的子表格关闭
• 效果2-----可同时展开多个子表格

效果1：嵌套表格，实现点击展开按钮，展开子表格请求接口数据，点击新的子表格收起原来的子表格效果

// 设置一个State用来储存展开的行，控制属性
const [expandedRowKeys,setExpandedRowKeys] = useState<any>([''])

//配置展开属性
expandable={{
            ①onExpand ,// 请求子表格后台数据
            ②onExpandedRowsChange,// 展开的行变化时触发
            ③expandedRowRender, // 子表格dom部分
            ④expandedRowKeys,// 展开的行，控制属性State的变量
        }}
// ①获取后台接口子表格数据
  const onExpand = (expanded: any, record: any) => {
    *****发送请求函数********
  };

// ②展开的行变化时触发
  const onExpandedRowsChange=(expandedRows: any)=>{
    expandRows(expandedRows)
  }
// ③子表格dom部分
  const expandedRowRender=()=>{
   return (
     <div>子表格dom内容部分</div>
  )
}
//④点击新的子表格收起原展开的子表格
const expandRows = (rows: any) => {
    // 点开是['',1]   ['',2]的数组 ，最后一个是我们当前展开的行，我们最后set一个['',当前展开行的下标]到expandedRowKeys就可以实现 ‘点击新的子表格收起原展开的子表格’
    const arrTemp = ['']
    setExpandedRowKeys(arrTemp.concat(rows[rows.length - 1]))
}

效果2：嵌套表格，可同时展开多个子表格，将各个子表格loading效果和接口返回数据根据唯一标识进行数据和loading的隔离

 // 嵌套表格的loading状态
  const [loadingObj, setLoadingObj] = useState<any>({});
 // 嵌套表格全部的数据源
  const [tableData, setTableData] = useState<any>({});
 //配置展开属性
expandable={{
            ①onExpand ,// 请求子表格后台数据
            ③expandedRowRender, // 子表格dom部分
        }}

// 请求后台数据
  const queryExpandedData = async (record: any, key: any) => {
    try {
      const table = { ...tableData };
      const loading = { ...loadingObj };
      const result: any = await ***子表格的请求***({});
      const data: any = result?.dataArr;
      table[key] = data;
      loading[key] = false;
      setTableData(table);
      setLoadingObj(loading);
    } catch (error) {
      console.log(error);
    }
  };
 // 子表格展开的点击函数
const onExpand=(expanded: any, record: any)=>{
 const key = record?.id;
    // 之前展开过
    if (tableData[key]?.length) return;
    // 第一次展开
    const loading = { ...loadingObj };
    loading[key] = true;
    setLoadingObj(loading);
    queryExpandedData(record, key);
}
// 子表格dom部分
const expandedRowRender=()=>{
   return (
     <div>子表格dom内容部分</div>
  )
}