leemuzi/real-time-fund
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 移动端表格斑马纹

Browse Source
This commit is contained in:
hzm
2026-03-13 22:30:10 +08:00
parent e46ced6360
commit b8f3af4486
3 changed files with 47 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/MobileFundTable.jsx
View File

@@ -1013,7 +1013,7 @@ export default function MobileFundTable({
strategy={verticalListSortingStrategy}
>
<AnimatePresence mode="popLayout">
{table.getRowModel().rows.map((row) => (
{table.getRowModel().rows.map((row, index) => (
<SortableRow
key={row.original.code || row.id}
row={row}
@@ -1025,7 +1025,7 @@ export default function MobileFundTable({
ref={sortBy === 'default' && !isNameSortMode ? setActivatorNodeRef : undefined}
className="table-row"
style={{
background: 'var(--bg)',
background: index % 2 === 0 ? 'var(--bg)' : 'var(--table-row-alt-bg)',
position: 'relative',
zIndex: 1,
...(mobileGridLayout.gridTemplateColumns ? { gridTemplateColumns: mobileGridLayout.gridTemplateColumns } : {}),
@@ -1039,11 +1039,19 @@ export default function MobileFundTable({
const alignClass = getAlignClass(columnId);
const cellClassName = cell.column.columnDef.meta?.cellClassName || '';
const isLastColumn = cellIndex === row.getVisibleCells().length - 1;
const style = isLastColumn ? {paddingRight: LAST_COLUMN_EXTRA} : {};
if (cellIndex === 0) {
if (index % 2 !== 0) {
style.background = 'var(--table-row-alt-bg)';
}else {
style.background = 'var(--bg)';
}
}
return (
<div
key={cell.id}
className={`table-cell ${alignClass} ${cellClassName} ${pinClass}`}
style={isLastColumn ? { paddingRight: LAST_COLUMN_EXTRA } : undefined}
style={style}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</div>