react如何使用实现antd Table选中行高亮显示

vaccinated

已于 2023-04-17 16:45:36 修改

阅读量1.7k

点赞数

文章标签：前端 reactjs

于 2023-04-17 15:59:30 首次发布

本文链接：https://blog.csdn.net/vaccinated/article/details/130201641

版权

首先定义高亮选中的key列表

const [arr, setarr] = useState([""])

获取table表单数据根据自己的数据进行配置

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];
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: 'Sydney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: 99,
    address: 'Sydney No. 1 Lake Park',
  },
];

将数据进行渲染

<Table
        rowSelection={{
            selectedRowKeys:arr,//被选中的key列表
                }}打开Table的表头选择 选择根据自己需要设置type:为多选或单选checkbox | radio

        onRow={record => ({
                    onClick: () => {setarr([...record.key]);}, //鼠标左击事件这里是单选的直接进行修改
        })}
        columns={columns}
        dataSource={data}
      />

如果需要多选进行判断是否存在arr内进行对应操作。
最后将表头进行隐藏就可以了

.ant-table-selection-column{
    display: none;
}
.ant-table-tbody > tr.ant-table-row-selected > td{
    background-color: rgb(224, 145, 145) !important;
}//通过这个css选择器自定义高亮颜色