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属性
<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
| 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你可以不用,但是必须存在
- 模板文件展示：
<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.字段名，获取原始数据