React:table组件/Pagination分页组件/Dialog组件 - 点击单元格内容显示弹窗，弹窗的内容由表格内容控制（1）

最新推荐文章于 2026-05-14 10:11:09 发布

原创最新推荐文章于 2026-05-14 10:11:09 发布 · 955 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

flask

React

本文介绍如何在React应用中使用表格组件展示接口执行结果，当点击表格单元格时，通过Dialog弹窗显示用例失败详情。针对用例失败详情存储在本地txt文件的问题，采取子组件模式，利用父组件传值实现内容回显，并通过href进行本地文件访问。此外，解决了动态拼接链接的问题，确保了页面布局和功能的正常运行。

需要解决的问题：显示接口的执行结果，并显示接口的用例以及用例失败详情

问题分析：执行结果可以用表格展示，失败的用例有零至多个，如果用表格嵌入表格的形式不太美观，而且用例失败详情是以txt存储在本地，不方便存入数据库拉取，所以失败的用例用弹窗展示，并通过链接跳转的方式，打开失败用例详情。

解决方法：表格为父组件，弹窗为子组件

弹窗内的内容：利用父组件当前所在行的唯一标识查找需要的数据，传给子组件回显，并通过href属性跳转

遇到的小问题：

（1）如何通过链接访问本地文件

（2）动态拼接跳转链接

解决方案：（1）访问本地链接有很多方式，最简单的一种就是利用接口

@app.route("/static/<filename>")
def get_filename(filename):
    with open(r'E:/xxxx/static/{}'.format(filename),'rb') as f:
        fileas = f.read()
        resp = Response(fileas,mimetype='application/octet-stream')

然后就可以通过链接访问：

http://127.0.0.1:5678/static/文件名

（2）拼接一直不对是因为拼接符号的问题

要用单引号

页面的整体布局：

一、首先 index.jsx文件里渲染一个表格，表格内容：一列数据，一列操作列

<Pagination/>是用来分页的分页组件

export default function TableList(){

 return (
    <>  
      <Card free>     
        <Card.Content>      
          <div className={styles.Main}>         
              <Table
                {...tableProps}
                hasBorder={false}
                className={styles.Table}                 
              >
                 <Table.Column title="xml名称" dataIndex="resourcename" lock width={240} />
                 <Table.Column
              title="操作"
              resizable          
              cell={cellOperation}
            />          
              </Table>
              <Pagination
          style={{
            marginTop: 16,
            textAlign: 'right',
          }}
          {...paginationProps}
        />        
          </div>
        </Card.Content>
      </Card>
  <DialogOperation
        visible={actionVisible}
        actionType={state.actionType}
        dataSource={optCol}
        onOk={handleOk}
        onClose={handleCancel}
       onCancel={handleCancel}
      />
    
    </>
  );


}

1、表格的数据来源于变量：tableprops，分页参数来源于变量：paginationProps

（1）tableprops、paginationProps 来源方法：

 const { paginationProps, tableProps } = useFusionTable(getTableData, {
      field,
    });

useFusionTable已经默认定义在ahooks里：

getTableData写在export default function TableList(){} 方法外：

const getTableData = ({ current, pageSize }, formData) => {
  let query = `page=${current}&size=${pageSize}`;
  Object.entries(formData).forEach(([key, value]) => {
    if (value) {
      query += `&${key}=${value}`;
    }
  });
  console.log("page",query)
  return fetch(`http://172.0.0.1:5678/getxmlresult2?${query}`)
     
    .then(res => res.json())
    .then(res => (
      console.log("sum",res.data.length),
      {
      
      total: res.total,
      list: res.data,
    }));
};

total参数的作用是用来确定要分多少页，list的是返回需要的数据

2、跳转弹窗的操作放在表格的操作列，通过方法cell={celloperation} 唤醒对话框/弹窗

  const operationCallback = useCallback(
    ({ actionType, dataSource }) => {
      setState({
        actionType,
        optCol: dataSource,
        actionVisible: true,
      });
    },
    [setState],
  ); // 父组件-子组件传值

 
const cellOperation = (...args) => {
    const record = args[2];
    console.log("recordarg",record);
    let dataa=null;
   
    request.post('http://127.0.0.1:5678/getfailurl',JSON.stringify({"xmlid":record.xmlid}), { headers: { 'Content-Type': 'application/json; charset=UTF-8' } }).then(res=>  { console.log("res",res); dataa=res;return res} );
  
      setTimeout(()=>{
      console.log("fc",dataa )},1000);

    return (
      <div>
        <Button
          text
          type="primary"
          onClick={() =>
            operationCallback({
              actionType: 'edit',
              dataSource: dataa,
            })
          }
        >
          查看失败用例
        </Button>
   
      </div>
    );
  };

record返回的是当前行的数据，把当前所在行的主键参数传给接口getfailurl，获取需要返回的数据，显示在Dialog弹窗中。

*注意：1、reque.post().then()返回的值只能在内部使用，所以需要定义一个外部变量let dataa=null获取返回的值

2、因为接口请求需要时间，所以需要setTimeout确保数据已经成功返回

setTimeout(()=>{

console.log("fc",dataa )},1000);