react项目表格内容轮播,DataV-React轮播表的使用

server/2025/2/1 9:14:48/

        项目中想要实现表格表头固定不动,表格行内容轮播呈现的效果,antd中的table无法实现,使用DataV-React轮播表来实现。

        官网地址:介绍 | DataV-React    轮播表 | DataV-React

        1. 安装

  • npm 安装
npm install @jiaminghi/data-view-react
  • yarn 安装
yarn add @jiaminghi/data-view-react

        2. 使用

javascript">import React from 'react';
import { ScrollBoard } from '@jiaminghi/data-view-react';const Index = () => {const config = {header: ['列1', '列2', '列3'], // 表头数据data: [ // 表数据['行1列1', '行1列2', '行1列3'],['行2列1', '行2列2', '行2列3'],['行3列1', '行3列2', '行3列3'],['行4列1', '行4列2', '行4列3'],['行5列1', '行5列2', '行5列3'],['行6列1', '行6列2', '行6列3'],['行7列1', '行7列2', '行7列3'],['行8列1', '行8列2', '行8列3'],['行9列1', '行9列2', '行9列3'],['行10列1', '行10列2', '行10列3']],align: ['center', 'center', 'center'], // 列对齐方式headerBGC: ['transparent'], // 表头背景色evenRowBGC: ['transparent'], // 偶数行oddRowBGC: ['transparent'], // 奇数行columnWidth: [100, 100, 100], // 列宽度headerHeight: 40, // 表头高度};return (<ScrollBoard config={config} style={{ width: '500px', height: '220px' }} />);
};export default Index;

        如果想要设置整个表格文字样式,可以在ScrollBoard的style属性中添加color等样式,针对某一列文字做特殊处理,可以采用以下两种方式:

        1)样式文件中使用:global{}包裹元素选择器,设置样式。

        2)参考官网中轮播表定制元素代码,为单元格添加行内样式:

javascript">data: [['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3'],['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>'],['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3'],['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3'],['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3'],['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>'],['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3'],['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3'],['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3']],


http://www.ppmy.cn/server/164029.html

相关文章

JVM_类的加载、链接、初始化、卸载、主动使用、被动使用

①. 说说类加载分几步&#xff1f; ①. 按照Java虚拟机规范,从class文件到加载到内存中的类,到类卸载出内存为止,它的整个生命周期包括如下7个阶段: 第一过程的加载(loading)也称为装载验证、准备、解析3个部分统称为链接(Linking)在Java中数据类型分为基本数据类型和引用数据…

“大模型横扫千军”背后的大数据挖掘--浅谈MapReduce

文章目录 O 背景知识1 数据挖掘2 邦费罗尼原则3 TF.IDF4 哈希函数5 分布式文件系统 一、MapReduce基本介绍1. Map 任务2. 按键分组3. Reduce 任务4. 节点失效处理5.小测验&#xff1a;在一个大型语料库上有100个map任务和若干reduce任务&#xff1a; 二、基于MapReduce的基本运…

Canny 边缘检测

步骤 1.降噪 应用高斯滤波器&#xff0c;以平滑图像&#xff0c;滤除噪声。 边缘检测易受噪声影响&#xff0c;所以使用高斯滤波器平滑图像&#xff0c;降低噪声。 2.梯度 计算图像中每个像素点的梯度大小和方向。 计算大小 Sobel算子是一种常用的边缘检测滤波器&#xff…

【fly-iot飞凡物联】(20):2025年总体规划,把物联网整套技术方案和实现并落地,完成项目开发和课程录制。

前言 fly-iot飞凡物联专栏&#xff1a; https://blog.csdn.net/freewebsys/category_12219758.html 1&#xff0c;开源项目地址进行项目开发 https://gitee.com/fly-iot/fly-iot-platform 完成项目开发&#xff0c;接口开发。 把相关内容总结成文档&#xff0c;并录制课程。…

android studio生成jsk

JKS 文件&#xff08;Java KeyStore&#xff09;是 Android 开发中用于签名 APK 的密钥库文件。它包含用于签名的私钥和公钥&#xff0c;并保护其不被未授权使用。 在 Android 开发中&#xff0c;所有的 APK 文件在发布之前必须使用签名密钥进行签名&#xff1a; 调试签名&am…

【C++】类与对象(中)

&#x1f984; 个人主页: 小米里的大麦-CSDN博客 &#x1f38f; 所属专栏: 小米里的大麦——C专栏_CSDN博客 &#x1f381; 代码托管: 小米里的大麦的Gitee仓库 ⚙️ 操作环境: Visual Studio 2022 文章目录 1. 类的6个默认成员函数传道解惑&#xff1a;Q1&#xff1a;e1——类…

NVIDIA GPU介绍:概念、序列、核心、A100、H100

概述 入职一家大模型领域创业公司&#xff0c;恶补相关知识。 概念 一些概念&#xff1a; HPC&#xff1a;High Performance Computing&#xff0c;高性能计算SoC&#xff1a;System on Chip&#xff0c;单片系统FLOPS&#xff1a;Floating Point Operations Per Second&am…

【2】阿里面试题整理

[1]. 说一下Java与C的区别。 Java和C是两种在软件开发领域应用非常广泛的语言&#xff0c;但它们的设计理念和应用场景有所不同。 Java是一种基于JVM的解释型语言&#xff0c;具有跨平台性&#xff0c;使用自动垃圾回收机制&#xff0c;这使得开发者可以更专注于业务逻辑&…