react大屏中使用dataV方法

1下载引入

yarn add @jiaminghi/data-view-react

```
import { BorderBox1 } from '@jiaminghi/data-view-react'
```
```
```
**2页面中使用**


```import { ScrollBoard } from "@jiaminghi/data-view-react";

  <div className='alarm-info-table'>
        <div className="alarm-panel">
        <ScrollBoard config={options} className='scroll-board' />
        </div>
      </div>
```



``` .alarm-info-table {
    width: 100%;
    // height: calc((100 - 98 / 1080) * 100vh);
    // height: calc(100% - " + 1080 / 100 * 36 + " px);
    flex: 1;
    position: relative;
    // border: 1px solid red;
    .alarm-panel {
      position: absolute;
      width: 100%;
      height: 100%;
      // border: 1px solid greenyellow;
    }
    .scroll-board {
      width: 100%;
      height: 100% !important;
    }
    .header-item {
      // font-size: 14px;
      .px2font(16);
      color: #00d2ff;
      font-weight: 700;
    }
    .row-item {
      // font-size: 12px;
      .px2font(14);
    }
    .row-item:nth-child(odd) {
      color: #00d2ff;
    }
    .row-item:nth-child(even) {
      color: #00ff84;
    }
  }
```

```export const options = {
  header: ["列1", "列2", "列3"], // 表头数据
  headerBGC: "", // 表头背景色
  oddRowBGC: "", // 奇数行背景色
  evenRowBGC: "", // 偶数行背景色
  headerHeight: 20, // 表头高度
  columnWidth: [], // 列宽度
  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"],
  ], // 表数据
  index: true,
  align: ["center"], // 列对齐方式
  rowNum: 5,
  // waitTime: 50000,
};

```


**可以自己修改样式和颜色**
此文章为11月Day025学习笔记，内容来源于极客时间《重学前端》，强烈推荐该课程