ProAntd+react+ts表格行点击高亮+表格联动

最新推荐文章于 2024-05-10 17:17:36 发布

珎珎啊

最新推荐文章于 2024-05-10 17:17:36 发布

阅读量734

点赞数

分类专栏：代码笔记文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_43363773/article/details/127867361

版权

代码同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

笔记

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在React应用中利用AdvancedTable组件的rowClassName属性，结合CSS样式，实现表格行被选中时的高亮效果。通过监听点击事件，根据不同类型更新省份、城市和区域信息，并在条件匹配时应用`selectHigh`类，达到行高亮的目的。

摘要由CSDN通过智能技术生成

原理

通过表格的rowClassName属性，给行添加类名
在这里插入图片描述

css代码

.selectHigh{
  background-color: rgb(234, 248, 258)!important;
}

tsx部分代码

  const handleRowClick = (e: any, record: any) => {
    let param = { type: record.type, key: record.key };
    switch (title) {
      case '省份':
        setProvinceInfo(param);
        break;
      case '城市':
        setCityInfo(param);
        break;
      case '区域':
        setCountyInfo(param);
        break;
      default:
        break;
    }
  };



return (<AdvancedTable
   columns={column}
   dataSource={data}
   tableClassName={'table' + tableName}
   bordered={false}
   rowKey="key"
   toolBarRender={false}
   search={false}
   loading={false}
   scroll={{ x: 'max-content' }}
   rowClassName={(record: any) => {
     if (
       (record.key == provinceInfo.key && title == '省份') ||
       (record.key == cityInfo.key && title == '城市') ||
       (record.key == countyInfo.key && title == '区域')
     ) {
       // 选中行高亮
       return `selectHigh`;
     }
     return '';
   }}
   onRow={(record) => {
     return {
       onClick: (e: any) => {
         handleRowClick(e, record);
       }, // 点击行
     };
   }}
   tableAlertRender={false}
   pagination={{
     current: pageNum,
     onChange: (page) => handlePageChange(page),
     total: data?.length,
     pageSize: 5,
     size: 'small',
     showSizeChanger: false,
     hideOnSinglePage: true,
   }}
 />)