表头第一行固定的核心逻辑:1、在表头数据源中做逻辑处理,通过Table的sorter函数找到为’汇总‘的第一组数据,就return 0(不排序),反之就排序;2、rowClassName中,找到第一行且名字相同,就添加相应样式

 示例代码如下:

//贴一下我的数据吧
//表头数据
const titleData = [
   {
    "title": "总公司",
    "dataIndex": "0",
    "key": "0"
},
{
    "title": "子公司",
    "dataIndex": "1",
    "key": "1"
}
....
//太多了懒得写了,一共十一个
]

//表格内容数据
const dataList =[
{
    0: "汇总"
    1: "1235.55"
    2: "-6.32%"
    3: "23.48"
    4: "-5.59%"
    5: "807.15"
    6: "-6.18%"
    7: "436.86"
    8: "-16.08%"
    9: "70.05"
    10: "57.12%"
},
{
  0: "其他数据"
    1: "986321"
    2: "-6.32%"
    3: "23.48"
    4: "-5.59%"
    5: "807.15"
    6: "-6.18%"
    7: "436.86"
    8: "-16.08%"
    9: "70.05"
    10: "57.12%"
}
]

//我这里的表头是动态的
//动态表头数据源中的排序处理
 if (isSorterList) {
        if (isSorterList.some(ele => ele == item.title)) {
          item.sorter = (a, b) => {
            //排序中文
            if (/[\u4e00-\u9fff]/.test(a[index]) || /[\u4e00-\u9fff]/.test(b[index])) {
              return a[index]?.localeCompare(b[index])
            }
            else {
               //主要是这一句
              if (Object.values(a)[0] == '汇总' || Object.values(b)[0] == '汇总') {
                return 0
              }
            //排序数字
              let result = Number(a[index]) - Number(b[index])
              return result;
            }

          }
        }

      }


//设置rowClassName
  const rowClassName = (record, index) => {
    if (index == 0 && Object.values(record)[0] == '汇总') {
      return `${styles.first_row}`;
    }
}


//css样式
  position: sticky;
  top: 0;//top就是在最前面一行,bottom就是最后一行
  z-index: 99;//层级看着调
  background-color: #F6F8FA;

效果图实在没法贴,公司电脑  有水印。。。。。大致就是这样,有问题请留言,欢迎指证

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐