前言 在做antd表格时通常会用到table组件,如何修改antd组件的默认样式想必大家都知道,那么我们如何将表格的奇数行和偶数行设置为不同样式呢,如下图所示
文章图片
react中覆盖antd组件的样式渲染时给奇偶行设置不同类名 利用Table组件官方API接口修改行的类名,通过类名设置不同行的样式.
js文件
TableChangeDom.js
/**
* @file 列表奇偶行设置不同样式;
渲染时给奇偶行设置不同类名
* */import React from "react";
import { Table } from 'antd';
import styles from "./TableChangeDom.less";
const dataSource = [
{
key: '1',
name: '张三',
age: 32,
address: '西湖区',
},
{
key: '2',
name: '李四',
age: 42,
address: '下城区',
},
{
key: '3',
name: '王五',
age: 52,
address: '上城区',
},
{
key: '4',
name: '赵六',
age: 26,
address: '余杭区',
},
{
key: '5',
name: '胡彦祖',
age: 29,
address: '萧山区',
},
];
const columns = [
{
title: '序号',
render: (text, record, index) => `${index + 1}`,
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
];
class TableChangeDom extends React.Component {/**
* @function 获取表格行的类名
* @param {array} record 当前行数据
* @param {number} index 当前行索引
* @return {string} className 类名
* */
getRowClassName = (record, index) => {
let className = '';
className = index % 2 === 0 ? styles.oddRow : styles.evenRow;
return className;
}render() {
// const { className, ...otherProps } = this.props;
return (
);
}
};
export default TableChangeDom;
css文件
TableChangeDom.less
.root {
.oddRow {
background-color: #fff;
}
.evenRow {
background-color: #c0c0c0;
}
}
通过CSS选择器为奇偶行设置不同样式 使用
:nth-child(n)选择器匹配奇偶行元素并为其设置不同样式js文件
TableChangeCss.js
/**
* @file 列表奇偶行设置不同样式;
通过CSS选择器为奇偶行设置不同样式
* */import React from "react";
import { Table } from 'antd';
import styles from "./TableChangeCss.less";
const dataSource = [
{
key: '1',
name: '张三',
age: 32,
address: '西湖区',
},
{
key: '2',
name: '李四',
age: 42,
address: '下城区',
},
{
key: '3',
name: '王五',
age: 52,
address: '上城区',
},
{
key: '4',
name: '赵六',
age: 26,
address: '余杭区',
},
{
key: '5',
name: '胡彦祖',
age: 29,
address: '萧山区',
},
];
const columns = [
{
title: '序号',
render: (text, record, index) => `${index + 1}`,
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
];
class TableChangeCss extends React.Component {
render() {
return (
);
}
};
export default TableChangeCss;
css文件
TableChangeCss.less
.root {
:global {
h1.ant-typography,
.ant-typography h1 {
margin-top: 0.5em;
}
}
}
以上例子的GitHub地址 【React|antd中table表格奇偶行设置不同样式(颜色交替)】react-demo
参考资料 antd-table组件
CSS3 :nth-child() 选择器
推荐阅读
- 前端|面试官（谈谈Vue和React的区别（））
- react|高德地图的使用及自定义图标
- React|【React Native开发】React Native控件之RefreshControl组件详解(21)
- React|React Native开源项目-嘎嘎商城客户端(持续更新中)
- 工作与生活|2016总结,真正新的里程碑和新起点
- React|【React Native开发】React Native应用设备运行(Running)以及调试(Debugging)(3)
- React|【React Native开发】React Native控件之ListView组件讲解以及最齐全实例(19)
- React|React Native控件之PullToRefreshViewAndroid下拉刷新组件讲解(20)
- React|【React Native开发】React Native控件之Text组件讲解(9)
- react学习之旅|react+antd-mobile之项目构建+基础配置