bs-ui-table v0.2.4

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属性

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

• data：table所需数据

• data格式展示：

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

• config：table配置

• config配置说明：

    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版本支持，当无数据样式不满足项目需求时，可通过该字段自定义无数据的模板

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

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

table事件

    <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中定义组件名称和路径

    <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部分

    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

【config->tableStyle】，如果table的高度是页面的高度，可以这样设置page{height: 100%;}，然后config->tableStyle："height": "100%" |

• ps：如果需要隐藏header，请使用config->header->hide项，不建议使用config->header->trStyle样式设置。

bs-col

• 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你可以不用,但是必须存在
• 模板文件展示：

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