1、分别用table和div实现一个细线表格（3行3列，表格边框1px（红色），单元格200px*200px）

Posted 2023-04-15

1、分别用table和div实现一个细线表格（3行3列，表格边框1px（红色），单元格200px*200px）
2、根据提供的psd实现网页
qq我 啊
急急复急急 q251754076

表格方式：
<table  cellspacing="0" cellpadding="0" style="border:1px red solid">
  <tr>
    <td  style="border-right:1px red solid; border-bottom:1px red solid">第一行1</td>
    <td  style="border-right:1px red solid; border-bottom:1px red solid">第一行2</td>
    <td  style="border-bottom:1px red solid">第一行3</td>
  </tr>
  <tr>
    <td  style="border-right:1px red solid; border-bottom:1px red solid">第二行1</td>
    <td  style="border-right:1px red solid; border-bottom:1px red solid">第二行2</td>
    <td  style="border-bottom:1px red solid">第二行3</td>
  </tr>
  <tr>
    <td  style="border-right:1px red solid;">第三行1</td>
    <td  style="border-right:1px red solid;">第三行2</td>
    <td  >第三行3</td>
  </tr>
</table>

div方式：
<style>
#tbwidth:600px;height:auto; margin-top:10px;
.tdfloat:left; width:198px;height:20px;border-left:1px solid red; border-top:1px solid red;
.trclear:both;height:20px; 
.td1border-right:1px solid red;
.td2border-bottom:1px solid red;
</style>

<div id="tb">
<div class="tr"><div class="td">td1</div><div class="td">td2</div><div class="td td1">td3</div></div>
<div class="tr"><div class="td">td1</div><div class="td">td2</div><div class="td td1">td3</div></div>
<div class="tr"><div class="td td2">td1</div><div class="td td2">td2</div><div class="td td1 td2">td3</div></div>
</div> 参考技术A 呃。。很简单啊。。。 参考技术B 根据提供的PSD实现网页， 是什么意思

ant design V3 实现table表格 添加底部合计行

目录

因 4版本才有 Table.Summary api去实现合计行,那3版本怎么来实现这个功能呢？

实现思路:

完整代码

---

因 4版本才有 Table.Summary api去实现合计行,那3版本怎么来实现这个功能呢？

实现思路:

1. 每次分页请求接口，都将接口返回的合计数据和表格的正常数据进行合并，这样数据的最后一条一直都是合计的数据
2. table的columns的第一个通过索引设置，最后一行显示 '合计'
3. 将table的pagination设置为false
4. 使用Pagination组件控制分页

这样就不受table组件的pageSize的控制，导致显示不出合计行了

完整代码

import React,  useState, useEffect, useRef  from 'react'
import defaultPag from '@src/common/defaultPagination'
import  Table, Pagination  from 'antd'
import moment from 'moment'


function CallInReport () 
    const [ tableData, setTableData ] = useState([])
    const [ pagination, setPagination ] = useState(defaultPag( isAdjust: false ))
    const [ loading, setLoading ] = useState(false)

    const queryTableData = async (query = ) => 
        const apiParams = 
            ...query,
            pageNo: query.pageNo || 1,
            pageSize: query.pageSize || pagination.pageSize,
        
        setLoading(true)
        const res = await ajax('xxx', apiParams)
        setLoading(false)
        let paginationNew = 
            ...pagination,
            current: +res.page.pageNo || 1,
            pageSize: +res.page.pageSize || pagination.pageSize,
            total: +res.page.totalSize,
        

        setTableData([ ...res.records, res.total ])
        setPagination(paginationNew)
    

    const columns = [
        
            title: '日期',
            dataIndex: 'date',
            key: 'date',
            fixed: 'left',
            render: (text, record, index) => index === tableData.length - 1 ? '总计' : moment(text).format('YYYY-MM-DD'),
        ,
    ]
    const paginationChange = (page, pageSize) => 
        const params = 
            pageNo: page,
            pageSize: pageSize,
        
        queryTableData(params)
    
    const showSizeChange = (current, size) => 
        const params = 
            pageNo: current,
            pageSize: size,
        
        queryTableData(params)
    

    return (
        <div>
            <Table
                rowKey=(record, index) => `$ index `
                columns=columns
                loading=loading
                scroll= x: 'max-content' 
                dataSource=tableData
                pagination=false
                bordered
            />
            <div className='custom-pagination-container'>
                <Pagination
                    ...pagination
                    onChange=paginationChange
                    onShowSizeChange=showSizeChange
                />
            </div>
        </div>
    )