import React from 'react';
import { Table } from 'antd';
import styles from './index.less';
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Joe123 Black',
age: 42,
address: 'Sidney No. 1 Lake Park',
},
{
key: '5',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
];
export default class Relationship extends React.Component {
constructor() {
super()
this.state = {
age: '',
address: ''
}
}
ReaderColumns = () => {
const { age, address } = this.state;
const columns = [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
render: (text, record) => {
return {
props: {
className: record.age === age ? styles.red : ''
},
children: <a href="javascript:;">{text}</a>,
}
}
},
{
title: 'Address',
dataIndex: 'address',
render: (text, record) => {
return {
props: {
className: record.address === address ? styles.yellow : ''
},
children: <a href="javascript:;">{text}</a>,
}
}
}, {
title: '操作',
render: (text, record) => {
return (
<React.Fragment>
<a onClick={() => this.HightLight(record)}>高亮</a>
</React.Fragment>
)
}
}
];
return columns;
}
HightLight = (record) => {
const { age, address } = record;
this.setState({
age,
address
})
}
render() {
return (
<Table columns={this.ReaderColumns()} dataSource={data} bordered />
)
}
}
index.less文件
.yellow{
background: yellow!important;
}
.red{
background: red!important;
}
效果如图：
