前言
移动端的页面本应该很少有table表格这样的展示、操作，但总归有这样的需求，然而平时用的vant和iview的小程序组件库都没有table组件，这里将自己编写的table组件展示一下供大家查看。
小程序实现table的问题在于，自定义td的实现，而小程序没办法像react一样使用jsx，也没办法像vue一样用作用域插槽传row行的信息给slot，但是小程序还是留有一样东西可以完成自定义td的功能。
抽象节点
这个特性自小程序基础库版本 1.9.6 开始支持。
有时，自定义组件模板中的一些节点，其对应的自定义组件不是由自定义组件本身确定的，而是自定义组件的调用者确定的。这时可以把这个节点声明为“抽象节点”。
微信官方api地址
通过抽象节点我们可以做到使用自定义组件通过key值分发组件内容到不同的td里。
具体的源码地址可点击下方查看，如果对你有帮助请点个star~~
源码地址
具体的实现效果可以扫描下方小程序码。
API
prop
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| columns | 表格的配置 | Columns[] | [] | true |
| dataList | 数据 | any[] | [] | true |
| getListLoading | 请求列表的loading | boolean | false | true |
| showTipImage | 无数据时的提示文本图片 | boolean | false | true |
| rowKey | 用于指明行的唯一标识符，在勾选中有使用 | string | id | false |
| scrollViewHeight | 控制可滚动区域高度。 | 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 |
Events
| 事件 | 解释 | 类型 |
|---|---|---|
| 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里)} |
| bindcheckkey | 勾选事件 返回被勾选项的rowKey数组 | Function(e); e.detail.value = any[]//(数组内每一项是rowKey字段定义的数据的toString()结果) |
| bindscrolltolower | 滚动触底 | Function() |
| bindscrolltoupper | 滚动触顶 | Function() |
column
列描述数据对象，是 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 |
内容置空，输出data也是空，为什么还存在一条信息呢，应该怎么处理
分享下自己封装的表格组件
https://github.com/yw0525/mina-component
表格中的数据setData()不能渲染页面是什么情况。。怎么处理。appdata里也显示[0]
大佬们，自定义td内容是怎么用的呢
无法在setData之后更新渲染。我尝试过使用冗余的this.setDate({matchList=this.data.matchList})，但是仍然没有解决这个问题。在数据项中增加一个id项也没有解决这个问题。希望可以获得大家的帮助T_T。
<table class="matchRecords" dataList="{{matchList}}" columns="{{tableColumns}}" getListLoading="{{getMatchListLoading}}" showTipImage="{{dataList.length===0&!getListLoading}}" rowKey="id"></table>matchList:[{id:1,date:"07-07 00:00",teamA:"team1",teamAScore:"-",teamBScore:'-',teamB:"name1"},{id:2,date:"07-07 00:00",teamA:"team2",teamAScore:"-",teamBScore:'-',teamB:"name2"},{id:3,date:"07-07 00:00",teamA:"team3",teamAScore:"3",teamBScore:'1',teamB:"name3"},{id:4,date:"07-07 00:00",teamA:"team4",teamAScore:"2",teamBScore:'3',teamB:"name4"}],getMatchListLoading: function(e){try{this.loadMatch_db(this.data.date,this.data.matches[this.data.currentIndex].matchName,this.data.turn)}catch(error){wx.showToast({title: '网络连接不良',icon: 'none',duration: 1000})return false}if(matchList.length===0){return false}return true},能不能使用插槽
有没有能够新建一行的，比如说我设定一个按钮，点击一下就新建一行出来？
第一种情况setData赋值3行数据可以显示，另外一种情况setData赋值5行数据只显示3行怎么解决？
点击操作项，可以跳转页面吗
设置scroll-x="{{true}}"后，表头表体的同步会有点问题
修改table.js下的setScrollLeft方法后就好多了
setScrollLeft(e) { const scrollLeft = e.detail.scrollLeft; this.setData({ scrollLeftHeader: scrollLeft, // 同步更新表头区域的滚动位置 scrollLeftContent: scrollLeft // 同步更新表格内容区域的滚动位置 }); },