a543462378 2021-12-31 16:48 采纳率: 84.7%
浏览 87
已结题

项目react+antd,这种详情表怎么写?

项目中有一张详情表是这样的

img


取值的接口是这样的

function fetchEnergy(params) {
    return ask({
        url: '/companyReportinganalysis/passengerReportTransport',
        params
    })
}


function seeEnergy(row) {
        console.log('row', row)

        setRow(row)
        setVisible0(true);
        // 默认值
        setCondition({
            companyFid: row.companyFid,
            startTime: moment().subtract(1, 'years').format("YYYY-MM"),
            endTime: moment().format('YYYY-MM'),
        })
        setDateCondition(moment().format('YYYY-MM'))

    }

    function getEnergy() {
        fetchEnergy({
            ...condition
        }).then(res => {
            if (res.code === '0' && res.data && Array.isArray(res.data) ) {
                setEnergy(res.data);
            }
        })
    }

后端给我的值是这样的

{
"code": "0",
"data": {
"coal": 0, //煤炭 吨
"diesel": 15.98, //柴油 吨
"electric": 0, //电力 万千瓦时
"fuel": 0, //燃料油 吨
"gas": 0, //天然气 立方米
"gasoline": 0, //汽油 吨
"other": 0, //其它 吨标煤
"total": 15.98 //合计
}, //返回数据
"msg": "成功" //返回文字描述
}

这种情况下表要怎么写?

  • 写回答

5条回答 默认 最新

  • HashFlag 2021-12-31 17:52
    关注

    我只是简单写了下思路,具体用var还是let要看你在函数外还是函数内,值部分也就是res.data里面拿对应值填写

    function fetchEnergy(params) {
        return ask({
            url: '/companyReportinganalysis/passengerReportTransport',
            params
        })
    }
     
    function seeEnergy(row) {
            console.log('row', row)
            setRow(row)
            setVisible0(true);
            // 默认值
            setCondition({
                companyFid: row.companyFid,
                startTime: moment().subtract(1, 'years').format("YYYY-MM"),
                endTime: moment().format('YYYY-MM'),
            })
            setDateCondition(moment().format('YYYY-MM'))
        }
        function getEnergy() {
            fetchEnergy({
                ...condition
            }).then(res => {
                if (res.code === '0' && res.data && Array.isArray(res.data) ) {
                    setEnergy(res.data);
                }
            })
        }
    
    
    var dataSource = [
      {
        key: '1',
        name: '煤炭',
        dw: '吨',
        nlxh: '',  // 初始值设为空,然后在请求后取数据后返回值填写
      },
      .
      .
      .
      {
        key: '8',
        name: '外包',
        dw: '吨位标准煤',
        nlxh: '',
      },
      {
        key: '9',
        name: '合计',
        dw: '吨位标准煤',
        nlxh: '',
      },
    ];
    
    var columns = [
      {
        title: '分类',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '计算单位',
        dataIndex: 'dw',
        key: 'dw',
      },
      {
        title: '能源消耗量',
        dataIndex: 'nlxh',
        key: 'nlxh',
      },
    ];
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
    1人已打赏
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 1月15日
  • 已采纳回答 1月7日
  • 修改了问题 12月31日
  • 创建了问题 12月31日

悬赏问题

  • ¥15 流式socket文件传输答疑
  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥15 寻找能匹配的液晶显示屏。