# 小程序表格组件

**Repository Path**: my_new_way/applet-table-component

## Basic Information

- **Project Name**: 小程序表格组件
- **Description**: 小程序表格组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 2
- **Created**: 2021-03-19
- **Last Updated**: 2022-05-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 表格组件

#### Props

|   参数    |   说明   |     类型      | 默认值 |
| :-------: | :------: | :-----------: | :----: |
| titleList | 标题列表 |     array     |   []   |
| dataList  | 表格数据 | array[object] |   []   |
|           |          |               |        |

##### titleList

| 参数 |    说明     | 类型  | 备注             |
| :--: | :---------: | :---: | ---------------- |
| name | 要显示title | Array | 数组包含每个对象 |

#### dataList

| 参数 | 说明        | 类型  | 备注                                         |
| ---- | ----------- | ----- | -------------------------------------------- |
| name | 要显示title | Array | 数组包含每个数组，被包含的数组中包含每个对象 |

#### 表格头实例

如果需要二级表头则需要 `children` key，否则则不要出现 `children` key

```
  titleList: [{
        name: '标题1',
        children: [{
            name: '11'
          },
          {
            name: '22'
          }
        ]
      },
      {
        name: '标题2',
        children: [{
            name: '11'
          },
          {
            name: '22'
          },
        ]
      },
      {
        name: '标题333',
      },
      {
        name: '标题444',

      },
      {
        name: '标题33333333333333',

      },
    ],
```

#### 一级表头和表体

```
    // 设备清单
    titleList1: [{
        name: '机型',
      },
      {
        name: '序列号',
      },
      {
        name: '使用小时数',
      },
      {
        name: '小时更新日期'
      }

    ],
    // 设备清单 表格体
    dataList1: [
      [{
          name: "1"
        },
        {
          name: '2'
        },
        {
          name: '3'
        },
        {
          name: '4'
        },

      ],
      [{
          name: "11"
        },
        {
          name: '22'
        },
        {
          name: "33"
        },
      ],

    ],
```

![image-20210317165927935](images/image-20210317165927935.png)



#### 二级表头和表体

**表格头**

```
 // 协议费用概述
    titleList4: [{
        name: '协议费用',
        children: [{
            name: '零件'
          },
          {
            name: '人工及其他'
          }
        ]
      },
      {
        name: '正常费用',
        children: [{
          name: '零件'
        },
        {
          name: '人工及其他'
        }
      ]
      },
      {
        name: '节省费用共计',
      },
    ],
```

**表格体**

```
[Array(5), Array(5), Array(5), Array(5)]
格式如下：
0: {name: "221"}
1: {name: "222"}
2: {name: "223"}
3: {name: "224"}
4: {name: "4"}
```

表格需要的结构组织方式

```
      CVAExpenseDetails = CVAExpenseDetails.map((item, index) => {
            return [{
                name: item.xyljfy
              },
              {
                name: item.xyrgjqt
              },
              {
                name: item.zclj
              },
              {
                name: item.zcrgjqt
              },
              {
                name: item.jsfygj
              }
            ]
          })
```



![image-20210319172553839](images/image-20210319172553839.png)