react实现antd Table 内容区域第一行,为汇总且固定展示
1、在表头数据源中做逻辑处理,通过Table的sorter函数找到为’汇总‘的第一组数据,就return 0(不排序),反之就排序;2、rowClassName中,找到第一行且比名字相同,就添加相应样式。效果图实在没法贴,公司电脑有水印。大致就是这样,有问题请留言,欢迎指证。
·
表头第一行固定的核心逻辑: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;
效果图实在没法贴,公司电脑 有水印。。。。。大致就是这样,有问题请留言,欢迎指证
更多推荐
所有评论(0)