# bs-ui-table

> bs-ui-table主要用于实现列表展示类型的组件，主要包含有基本的列表展示。

Latest version **0.2.4** (published 2020-05-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install bs-ui-table
pnpm add bs-ui-table
yarn add bs-ui-table
bun add bs-ui-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.4 |
| Published | 2020-05-25 |
| First published | 2019-03-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 32.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | magicao |

## Links

- npm: https://www.npmjs.com/package/bs-ui-table
- npm.io page: https://npm.io/package/bs-ui-table

## Recent versions

- 0.2.4 (latest) — 2020-05-25
- 0.2.2-beta2 (beta) — 2020-04-03
- 0.2.3 — 2020-04-27
- 0.2.2-beta1 — 2020-04-03
- 0.2.1 — 2019-06-21
- 0.2.0 — 2019-04-30
- 0.1.13 — 2019-04-11
- 0.1.11 — 2019-04-10
- 0.1.10 — 2019-04-03
- 0.1.7 — 2019-04-02
- 0.1.6 — 2019-04-01
- 0.1.5 — 2019-04-01
- 0.1.4 — 2019-03-29
- 0.1.3 — 2019-03-28
- 0.1.2 — 2019-03-28
- … 2 more at https://npm.io/package/bs-ui-table/versions

## README

# bs-ui-table

## 项目介绍

bs-ui-table主要用于实现列表展示类型的组件，主要包含有基本的列表展示。

## 功能介绍

- 支持基本图表展示，包含header和body部分
- 支持隐藏header
- 支持传入数组元素，设置每一列col的属性
- col支持label，prop，tdStyle，isHide的配置
- 支持斑马线样式配置
- 支持header样式配置
- header和body支持slot，但是body的slot支持的是按照col进行渲染(但是数据是传入整个行数据)
- 支持无数据的默认样式和slot

- [+] `v0.2.3`新增td点击事件
- [+] `v0.2.3`新增无数据区域点击事件
- [+] `v0.2.3`新增isTh类型模板，自定义table列头
- [+] `v0.2.3`新增th点击事件

## 属性  

### table属性

```xml
    <bs-table data="{{xxx}}" config="{{xxx}}" bind:xxx="yyyyyy" fixedheader ></bs-table>
```

- data：table所需数据

- data格式展示：

```js
    [
        {
            one: '1',
            two: '2',
        },
        {
            one: '11',
            two: '22',
        }
    ]
```

- config：table配置

- config配置说明：

```js
    config: {
        // table样式配置，不建议设置layout样式
        tableStyle: {   
            "font-size": '12rpx'
        },
        // table的表头设置，hide是否隐藏，style样式设置
        header: {       
            hide: true,
            style: {
                "background-color": 'red',
                "font-size": '26rpx',
                "color": '#000'
            }
        },
        // 行样式,不支持margin和padding
        trStyle: {
            "border-bottom": "2rpx solid red",
            "color": "#1AAD19",
            // "height": "220rpx"
        },
        // 斑马线行样式设置，只可设置2n-1行
        zebraStyle: {   
            "background-color": 'oldlace',
            "color": '#999',
            "font-size": '28rpx'
        },
        // 行点击的回调函数名称
        triggerEvent: 'lihaile',
        // 行点击效果，默认为true
        lineClickEffect: true
    }
```

- nodata: v0.1.11版本支持，当无数据样式不满足项目需求时，可通过该字段自定义无数据的模板

```xml
    <bs-table nodata="template模板文件name名" ></bs-table>
```

- fixedheader: 固定表头, 不支持页面onReachBottom， onReachTop等事件的监听，需要设置fixedheader属性和table的高度即可（table的高度可以在config里面设置）
- 如果你需要页面onReachBottom， onReachTop等事件的监听，可以在config中把hdead隐藏，然后在页面上自定义一个表头固定即可

### table事件

```xml
    <bs-table bind:xxx="yyy"></bs-table>
```

- [bind:callback] 行点击的回调事件，可在config中自定义函数名称
- xxx为config.triggerEvent设置的回调函数名
- yyy为接收函数
- 如果config里不设置triggerEvent，默认为callback

### table方法

...

### table的slot

    目前只支持一种slot，标签名称可在json中自定义，示例里为col

### column的属性

- isHide：隐藏列    【Boolean】
- label： 列的头展示 【String】
- prop：  列的绑定字段名【String】
- align： 列内容的排列方式【String】 只支持left，center，right
- is：    列的模板name与/template/index.wxml内的模板name对应，模板路径固定为/template/index.wxml【优先级:is > prop ,is和prop有一个就行】
- tool:   列的工具【只在template模板中可使用,Object类型】
- tdStyle:  列的行内样式【String】不支持margin属性

- `v0.2.3` [+] isTh: 自定义列头模板name值

### column的slot

    暂无

### 使用方法
- 在使用前,你可能需要在app.json中定义组件名称和路径

```xml
    <bs-table data="{{table}}" config="{{config}}" bind:lihaile="rowClickFun" bind:th0="bc" >
        <bs-col label="陈" prop="one" align="center" is="test" td-style="padding: 20rpx;" is-th="thimg" ></bs-col>
        <bs-col label="小" prop="two" is="row" align="right" td-style="width: 220rpx" ></bs-col>
        <bs-col label="wen" prop="ser" is-hide ></bs-col>
    </bs-table>
```

- js部分

```js
    Page({
        data: {
            table: [
                {
                    id: 1,
                    one: {
                        imgName: '1.png',
                        text: 1
                    },
                    two: '2',
                    ser: '3'
                },
                {
                    id: 2,
                    one: {
                        imgName: '2.png',
                        text: 11
                    },
                    two: '22',
                    ser: '33'
                },
                {
                    id: 3,
                    one: {
                        imgName: '1.png',
                        text: 111
                    },
                    two: '222',
                    ser: '333'
                },
                {
                    id: 4,
                    one: {
                        imgName: '2.png',
                        text: 1111
                    },
                    two: '2222',
                    ser: '3333'
                },
            ],
            config: {
                // table样式
                tableStyle: {
                    "font-size": '22rpx'
                },
                // 表头样式
                header: {
                    hide: true,
                    trStyle: {
                        "background-color": 'red',
                        "font-size": '26rpx',
                        "color": '#000'
                    },
                    thStyle: {
                        // ...
                    }
                },
                // 行样式,（不建议设置margin样式）
                trStyle: {
                    "border-bottom": "2rpx solid red",
                    "color": "#1AAD19",
                    // "height": "220rpx"
                },
                // 最后一行的样式
                trLastStyle: {
                    
                },
                // 斑马线tr样式（不建议设置margin样式）
                zebraStyle: {
                    "background-color": 'oldlace',
                    "color": 'red',
                    "font-size": '28rpx'
                },
                // 行点击的回调函数名称【可自定义】
                triggerEvent: 'lihaile',
                // 行点击效果，默认为false
                lineClickEffect: true
            }
        },
        methods: {
            bc(e) {
                console.log(e)
            }
        },
        rowClickFun(e) {
            console.log(e)
        }
    })
```

## 接口说明

### bs-table
| Property        | Type               | Default Value | Comments                                                                                                                                                                                                                                                       |
| ------------------------------ | ------------------ | ------------- | ------ |
| `data`          | Array              | []            | `table的数据源`，如果为空，table自动渲染成无数据模式                                                                                                                                                                                       |
| `config`        | Object             | --            | `table的样式配置`，包含tableStyle（table样式【Object】）、 header（header样式【Object】）、trStyle（行样式【Object】）、 zebraStyle（斑马线样式【Object】）、triggerEvent（自定义行点击回调名称【String】）、 lineClickEffect（是否启用行点击效果【Boolean】） |
| `bind:callback` | Function           | callback      | 行点击`回调名称`，可通过config->triggerEvent项自定义回调名称                                                                                                                                                                                |
| `nodata`        | Template模板name值 | --            | `无数据`时候指定的`template模板name值`，如果不指定，使用组件内置无数据样式                                                                                                                                                        |
| `fixedheader`   | Boolean            | false         | `固定表头`，使用该属性的前提是必须设置table的高度
| `bind:th`       | Function           | --            | 列头tap事件，需要在后面接列的下标，例如：bind:th2="函数名"
| `bind:td`       | Function           | --            | 列tap事件，需要在后面接列的下标，例如：bind:td0="函数名"
| `bind:nodata`   | Function           | --            | 无数据区域tap事件，例如：bind:nodata="函数名"

【config->tableStyle】，如果table的高度是页面的高度，可以这样设置page{height: 100%;}，然后config->tableStyle："height": "100%"                                  |
- ps：如果需要隐藏header，请使用config->header->hide项，不建议使用config->header->trStyle样式设置。

### bs-col
| Property | Type               | Default Value | Comments                                                                                                                        |
| -------------------- | -------------------- | --------------- |  --------------------------------------------------------------------------------------------------------------------------------- |
| `label`    | String             | ""            | col的`表头`展示                                                                                                                   |
| `is`       | Template模板name值 | ""            | 当简单的文字渲染不能满足需求，可以启动is项指定`template模板`                                                                      |
| `tool`     | Object             | --            | 扩展项，用于传递一个`Object对象`到template模板中，看实际的需求决定使用与否                                                        |
| `prop`     | String             | ""            | 不开启is项时，prop可以指定col渲染的`字段名`。 prop和is同时指定时在template模板中可以通过item[prop]/{{prop}}获取到prop指定的`字段值` |
| `align`    | String             | center        | col居中、左、右，center/left/right                                                                                              |
| `td-style` | String             | ""            | td的`行内样式`（如果bs-table中的config配置trStyle样式与之重复，td-style的优先级较高）                                             |
| `is-hide`  | Boolean            | false         | 是否渲染col，默认都渲染，如果为true，该列（包括表头）都不会渲染                                                                 |
| `is-th`   | String            | ""         | 自定义列头模板的name值，用法同`is`属性                                                                 |
- ps：如果需要隐藏一个col，请使用is-hide项，不建议使用td-style样式设置。

## 其他
- 注意：table父组件没有传入或传入的数据为空时，传入的config配置,除header和tableStyle,其他的都无效
- column的is属性说明：
    - 如果table的列只需纯文本展示是不需要配置该属性的
    - 如果需要自定义列的结构，你需要在项目的根目录创建template目录，在template目录下新增index.wxml
    - 新增的index.wxml文件为模板文件，整个项目的自定义table模板都应该放在这个文件里，且使用到的图片也应放在template目录下
    - 通过template的name属性区分不同的模板，最后column的is等于你自定义的模板name值即可
    - 如果有需要 你可以在template目录下新增index.wxss文件，把所有的样式都放在index.wxss文件中,index.wxss你可以不用,但是必须存在
- 模板文件展示：
```xml
    <template name="row">
        <text style="color: red" >{{item[prop]}}</text>
    </template>

    <template name="test">
        <view style="flex: 1;" >
            <text style="font-size: 16rpx" >测试</text>
            {{item[prop]['text']}}
            <image src="/template/images/{{item[prop].imgName}}" style="width: 160rpx; height: 160rpx;" ></image>
        </view>
    </template>
```

- prop高级用法: 列的prop属性除了支持绑定字段名外,还支持多个字段名的字符串格式化方式
    - 示例: prop="{ser} + {two} = ?" 展示的效果为: ser字段值 + two字段值 = ?
    - 绑定的字段值只支持字符串或数字

- is模板的高级用法: 
    - 当列组件上使用is模板并且定义了prop值(只支持单个字段名),在模板中可以通过item[prop]获取到prop定义的字段值
    - 当然你也可以不使用item[prop],直接{{prop}}获取到prop传递的字符串
    - 在列组件上定义了tool属性后,可以在模板中获取到tool传入的Object对象
    - `v0.2.3` 如果你使用template模板的时候发现数据都是字符串类型，可以通过item.字段名，获取原始数据

---
_Source: https://npm.io/package/bs-ui-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._