# miniprogram-table

**Repository Path**: mrzh39/miniprogram-table

## Basic Information

- **Project Name**: miniprogram-table
- **Description**: 小程序表格组件，附带复选框功能
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-04-27
- **Last Updated**: 2023-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# miniprogram-table

> 小程序表格组件，包含复选框功能

## 安装方式

**1. 直接拷贝dist目录到组件目录下**

**2. npm安装**

`npm install miniprogram-table`

构建npm

## 使用组件

**引入table组件**

```json
{
  "usingComponents": {
    "comp-table": "componentsPath/index"
  }
}
```

```wxml
<comp-table
    id="comp-table"
    headers="{{headers}}"
    data="{{datas}}"
    highlight-class="highlight"
    enable-checkbox="{{enableCheckbox}}"
/>
```

```wxss
.highlight {
	background: orange !important;
	font-weight: bold;
}
```

### 属性

| 属性            | 类型    | 默认值           | 说明                                                         |
| --------------- | ------- | ---------------- | ------------------------------------------------------------ |
| headers         | Array   | []               | 表头                                                         |
| header.prop     | String  |                  | 字段                                                         |
| header.label    | String  |                  | 表头文本                                                     |
| header.id       | Boolean | false            | 是否为主键                                                   |
| header.width    | Number  | 150              | 列宽度                                                       |
| header.fixed    | Boolean | false            | 是否固定该列到左侧                                           |
| header.sort     | Boolean | false            | 使用该列进行排序，如果为function，将作为排序时比较两个数据大小的回调，接受两个参数：a和b，只需要返回a是否大于b即可 |
| data            | Array   | []               | 表格数据                                                     |
| msg             | String  | '一条数据都没有' | 当表格中没有任何数据时，显示的提示文本                       |
| enableCheckbox  | Boolean | false            | 是否启用复选框，仅在指定有主键时有效                         |
| height          | String  | '50vh'           | 表格高度                                                     |
| highlight-class | String  |                  | 高亮行样式类                                                 |
| header-class    | String  |                  | 表头自定义样式类                                             |
| cell-class      | String  |                  | 自定义单元格样式                                             |
| stripe          | Boolean | false            | 是否显示条纹                                                 |
| stripe-color    | String  | '\#e5e5e5'       | 条纹颜色                                                     |

### 事件

| 事件        | detail                                                      | 说明                                                         |
| ----------- | ----------------------------------------------------------- | ------------------------------------------------------------ |
| select      | {selectAll:boolean, selectedCount: number, selected: Array} | 复选框事件                                                   |
| headerClick | {col: string, sortOrder: string}                            | 表头被点击时触发的事件{被点击的列，该列排序方式（仅在该列sort为true时返回） |



### 方法

> 通过`this.selectComponent('#id')`组件实例调用的方法

| 方法        | 参数 | 说明         |
| ----------- | ---- | ------------ |
| getSelected | -    | 获取选中数据 |

### 更新说明

#### v1.2.0

- 新增headerClick事件
- 修改header.sort的值只能为true or false