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属性
-
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版本支持,当无数据样式不满足项目需求时,可通过该字段自定义无数据的模板
- fixedheader: 固定表头, 不支持页面onReachBottom, onReachTop等事件的监听,需要设置fixedheader属性和table的高度即可(table的高度可以在config里面设置)
- 如果你需要页面onReachBottom, onReachTop等事件的监听,可以在config中把hdead隐藏,然后在页面上自定义一个表头固定即可
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中定义组件名称和路径
- js部分
接口说明
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你可以不用,但是必须存在
- 模板文件展示:
{{item[prop]}} 测试 {{item[prop]['text']}}
-
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.字段名,获取原始数据