该组件具有 列表展示模式,勾选模式,展开行模式。
- 复制
/miniprogram/public/components/public
下面的三个组件,到你的公共组件文件夹下(其实这三个组件也是也可以合为一体,因为empty与load_more组件是可以单独使用的,所以没有放到table组件中) - 在需要使用的页面引入table组件即可。
- 请注意,rowKey字段指出数据唯一的标识,默认值为id字段,若数据中不存在id字段,则请指定rowKey为数据中的唯一标识字段。
参数 | 说明 | 类型 | 默认值 | 是否必填 |
---|---|---|---|---|
columns | 表格的配置 | Columns[] | [] | true |
dataList | 数据 | any[] | [] | true |
getListLoading | 请求列表的loading | boolean | false | true |
showTipImage | 无数据时的提示文本图片 | boolean | false | true |
rowKey | 用于指明每条数据的唯一标识符,勾选状态下是勾选项返回的值 | string | id | false |
tableHeight | table高度。 | string | 600rpx | false |
tipTitle | 无数据时的提示文本主标题 | string | 提示 | false |
tipSubtitle | 无数据时的提示文本副标题 | string | 暂无数据 | false |
scrollX | 是否需要X轴滚动。 | boolean | false | false |
select | 控制是否出现勾选。 | boolean | false | false |
selectKeys | 勾选的初始值 | any[] | [] | false |
generic:action-td | 当列表项内具有操作列,需要在columns 内添加type:action 的一项,操作列的内容往往需要自定义,小程序不提供react,vue的rander函数 ,所以使用到了抽象节点,该属性指明抽象节点的组件。操作列位置可以不固定,点击事件由bindclickaction 触发 |
component | undefined | false |
isExpand | 控制是否点击展开。 | boolean | false | false |
expandValueKey | 展开信息的key值 | string | false | |
initExpandValue | 当展开信息为空时的默认提示语 | string | '暂无信息' | false |
expandStyle | 展开信息的最外层的样式 | string | '' | false |
generic:expand-component | 如果展开区域的内容需要自定义,expandValueKey 设置为空字符串,则切换到组件模式,传一个组件进来,展开区域的点击事件由bindclickexpand 触发 |
component | undefined | false |
dynamicValue | 给自定义内容的动态值,用于改变状态 ,建议{value:放的数据} | object | {} | false |
事件 | 解释 | 类型 |
---|---|---|
bindclicklistitem | 点击列表行事件 | Function(e); e.detail.value = {index:number(当前行序号),item: any(当前行的内容)} |
bindclickexpand | 点击展开内容事件 | Function(e); e.detail.value = {type:(这个按钮的含义字段,如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构,具体可以自己定义在expand-component里)} |
bindclickaction | 点击抽象节点事件 | Function(e); e.detail.value = {type:(这个按钮的含义字段,如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构,具体可以自己定义在action-td里)} |
bindonactionevent | 抽象节点内的业务事件触发 | Function(e); e.detail.value = {type:(这个按钮的含义字段,如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构,具体可以自己定义在action-td里)} |
bindcheckkey | 勾选事件 返回被勾选项的rowKey数组 | Function(e); e.detail.value = any[]//(数组内每一项是rowKey字段定义的数据的toString()结果) |
bindscrolltolower | 滚动触底 | Function() |
bindscrolltoupper | 滚动触顶 | Function() |
列描述数据对象,是 columns 中的一项,Column 使用相同的 API。
事件 | 解释 | 类型 | 必填 |
---|---|---|---|
title | 字段名中文含义 | string | true |
key | 字段名 | string | true |
width | 单元格宽度 | string | false |
type | 判断字段是否是自定义组件 | 'action'/undefined | false |
render | td内内容由函数返回 (value: any, item: any, index: number, data?: 当前页面的this.data) => any,// 设置内容 | function | false |