a543462378 2022-01-04 13:19 采纳率: 84.7%
浏览 163
已结题

这种表格要怎么取值?

项目组的详情表是要做成这样的

img


在表格中前面几列是固定的,只有最后一栏是取后端值,后端返回的数据如下

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

我现在写好的最终结果如下

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);
            }
        })
    }
var dataSource = [
        {
          key: '1',
          name: '煤炭',
          dw: '吨',
          nlxh: 'res.data.coal', 
        },
        {
            key: '2',
            name: '汽油',
            dw: '吨',
            nlxh: 'res.data.gasoline',
        },
        {
            key: '3',
            name: '燃料油',
            dw: '吨',
            nlxh: 'res.data.fuel',
        },
        {
            key: '4',
            name: '柴油',
            dw: '吨',
            nlxh: 'res.data.diesel',
        },
        {
            key: '5',
            name: '电',
            dw: '万千瓦时',
            nlxh: 'res.data.electric',
        },
        {
            key: '6',
            name: '天然气',
            dw: '立方米',
            nlxh: 'res.data.gas',
        },
        {
            key: '7',
            name: '其他',
            dw: '吨位标准煤',
            nlxh: 'res.data.other',
        },
        {
            key: '8',
            name: '外包',
            dw: '吨位标准煤',
            nlxh: '',
        },
        {
          key: '9',
          name: '合计',
          dw: '吨位标准煤',
          nlxh: 'res.data.total',
        },
      ];
      {/* 能耗明细 */}
                <Modal title={`能耗明细`} visible={visible0} width={600} footer={null} onCancel={onCancel} >
                    <div id='alert-table' ref={alertTableRef} style={{ paddingTop: 8 }}>
                        <Table bordered dataSource={dataSource} pagination={false} loading={loading}>
                            <Table.Column title='序号' align='center' width={50}
                                render={(text, row, index) => {
                                    return (
                                    <div>{index + 1}</div>
                                    )
                                }} />
                            <Table.Column title="分类" dataIndex='name' key='name' align='center' />
                            <Table.Column width={100} title="计算单位" dataIndex='dw' key='dw' align='center' />
                            <Table.Column title="能源消耗量" dataIndex='nlxh' key='nlxh' align='center' />
                        </Table>
                    </div>
                </Modal>

怎么才能取值成功呢?希望能帮忙写个例子或者找个例子

  • 写回答

5条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-01-04 13:39
    关注

    前端拼接
    首先你肯定是.then获取回来的数据对吧,res.data是你返还回来的数据
    在下方你定义一个

    const dataSource = [{
    class:'煤 炭',
    unit:'吨',
    consume:res.data.coal
    },
    {
    class:'柴油',
    unit:'吨',
    consume:res.data.diesel
    }
    ...
    ]
    
    const columns = [
      {
        title: "序号",
        render: (text, record, index) => `${index + 1}`
      }
      {
        title: '分类',
        dataIndex: 'class',
      },
      {
        title: '计量单位',
        dataIndex: 'unit',
      },
      {
        title:'能源消耗量',
        dataIndex:'consume'
      }
    ];
    
    <Table dataSource={dataSource} columns={columns} />;
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 1月15日
  • 已采纳回答 1月7日
  • 创建了问题 1月4日

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题