AntD表单Table单元格合并、样式处理

莉兹Liz

已于 2022-03-04 14:09:03 修改

阅读量5.5k

点赞数 2

分类专栏：前端样式文章标签： react.js antd javascript

于 2021-03-04 11:32:10 首次发布

本文链接：https://blog.csdn.net/qq_40138556/article/details/114364363

版权

本文介绍了如何在Ant Design的Table组件中处理表单，包括改变表头颜色和粗细、调整表体颜色、实现横纵单元格合并、进行金额条件格式化以及自定义合计行背景色。提供了相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Table表单处理

1、改变Table表单内表头颜色、粗细
2、改变表体颜色
3、合并横行、竖行单元格
4、金额处理，大于0显示红色，小于0显示绿色
5、改变合计行背景色

代码

/**
 * Table表单样式处理
 */
import React, {
    Component } from 'react';
import {
    Table } from 'antd';
import './index.css';
import * as util from '../../assets/js/utils.js';
const setRow = (value, record) => {
   
	const obj = {
   
		children: value,
		props: {
   },
	};
	if(record.sum === true) {
   
		obj.props.colSpan = 0
	}
	return obj;
}
const colorSet = (text) => {
   
	if(Number(text)>0) {
   
		return 'red'
	}
	if(Number(text)<0) {
   
		return 'green'
	}
}
const res = [{
   
    startDate: '2021-03-04',
    endDate: '2021-03-11',
    userNum: 12,
    position: '北京',
    session: 120,
    money: 20,
    status: '使用中',
},{
   
    startDate: '2021-03-04',
    endDate: '2021-03-11',
    userNum: 67,
    position: '杭州',
    session: 78,
    money: -27,
    status: '使用中',
},{
   
    startDate: '2021-03-04',
    endDate: '2021-03-11',
    userNum: 73,
    position: '沈阳',
    session: 93,
    money: 0,
    status: '使用中',

最低0.47元/天解锁文章