前言

移动端的页面本应该很少有table表格这样的展示、操作，但总归有这样的需求，然而平时用的vant和iview的小程序组件库都没有table组件，这下面讲解表格组件封装的案例。

github网址：https://github.com/kawaiiz/table_component

使用说明

该组件具有列表展示模式，勾选模式，展开行模式。

复制/miniprogram/public/components/public下面的三个组件，到你的公共组件文件夹下（其实这三个组件也是也可以合为一体，因为empty与load_more组件是可以单独使用的，所以没有放到table组件中）
在需要使用的页面引入table组件即可。

1、相关接口

属性：

参数	说明	类型	默认值	是否必填
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

一、表格组件使用

1.基础用法

1.1 代码

{"component": true,"usingComponents": {"table": "/public/components/public/table/table"}
}

<table class="basic-table" columns="{{tableColumns}}" dataList="{{dataList}}" getListLoading="{{getListLoading}}" showTipImage="{{dataList.length===0&!getListLoading}}" bindclicklistitem="handleClickItem" />

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {return new (P || (P = Promise))(function (resolve, reject) {function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }step((generator = generator.apply(thisArg, _arguments || [])).next());});
};
import { mockData } from '../../../../public/utils/util';
const app = getApp();
Component({options: {addGlobalClass: true,},properties: {},data: {tableColumns: [{title: "姓名",key: "name",}, {title: "年龄",key: "age",}, {title: "性别",key: "sex",}],dataList: [],pageNum: 1,pageSize: 10,pageCount: 1,getListLoading: false,},methods: {options: {},handleClickItem(e) {console.log(e);const { index, item } = e.detail.value;wx.showToast({title: `点击第${index + 1}行`});},getList() {return __awaiter(this, void 0, void 0, function* () {try {const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data;if (pageNum > pageCount)return;if (getListLoading)return;this.setData({getListLoading: true,});const res = yield mockData('list', {id: 1,name: '兼职人员',age: 10,sex: '男',}, "name", pageNum, pageSize);this.setData({dataList: dataList.concat(res.data.list),pageCount: res.data.pageCount,getListLoading: false,pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum,});}catch (e) {this.setData({getListLoading: false,});console.log(e);}});},initComponent() {this.getList();},},lifetimes: {attached: function () { },ready: function () { this.initComponent(); },moved: function () { },detached: function () { },},pageLifetimes: {show: function () { },hide: function () { },resize: function () { },},
});

1.2 效果

总结

本表格组件还可支持

设置滚动区域高度
横向滚动
上拉加载和下拉重置刷新
自定义TD内容和
多选
展开
批量修改和单元格监听等等功能

【愚公系列】2022年11月微信小程序-表格组件使用相关推荐

【愚公系列】2022年11月微信小程序-优购电商项目-授权页面
文章目录前言 1. 授权页面一.授权页面 1.业务逻辑 2.涉及的接口数据二.授权页面相关代码 1.页面代码 2.效果前言前言:由于微信官方修改了 getUserInfo 接口,所以现在无法 ...
【愚公系列】2022年11月微信小程序-优购电商项目-首页设计
文章目录前言一.首页设计 1.首页的业务逻辑 2.涉及的接口数据 3.关键技术二.首页相关代码 1.⾃定义组件搜索框 2.wx.request封装 3.首页页面 4.效果前言对于小程序电商首 ...
【愚公系列】2022年11月微信小程序-本地生活项目-首页
文章目录前言 1.本地生活服务平台的优势一.首页二.效果前言从线下企业到线上企业的整合是传统产业和互联网技术的有机结合.它看起来像一个简单的平台,但是它将给消费者和用户带来极大的便利.在电子 ...
【愚公系列】2022年11月微信小程序-优购电商项目-商品支付页面
文章目录前言 1. 商品⽀付页面设计规范一.商品支付页面 1.业务逻辑 2.涉及的接口数据 3. 关键技术二.商品购物车页面相关代码 1.页面代码 2.效果前言 1. 商品⽀付页面设计规范第 ...
【愚公系列】2022年11月微信小程序-本地生活项目-商家列表
文章目录前言一.商家列表二.效果前言 "商户"是指有实体经营场所的商家:如知识营销.网络营销.绿色营销.个性化营销.创新营销.整合营销.消费联盟营销.连锁经营渠道营销.大市 ...
【愚公系列】2022年11月微信小程序-优购电商项目-商品详情页面
文章目录前言一.商品详情⻚⾯ 1.业务逻辑 2.涉及的接口数据 3. 关键技术二.商品详情⻚⾯相关代码 1.页面代码 2.效果前言商品详情页是展示商品详细信息的一个页面,承载在网站的大部分流 ...
【愚公系列】2022年11月微信小程序-优购电商项目-商品收藏⻚⾯
文章目录前言一.商品收藏⻚⾯ 1.业务逻辑 2. 关键技术二.商品收藏⻚⾯代码 1.页面代码 2.效果前言商品收藏其实是可以衡量商品好坏和受欢迎程度的一个标准,根据标准可以设置商品权重. 商 ...
【愚公系列】2022年11月微信小程序-优购电商项目-意见反馈页面
文章目录前言一.意见反馈页面 1. 业务逻辑 2. 关键技术二.意见反馈页面代码 1.图片上传组件 2.页面代码 3.效果前言对于需要收集产品上线后用户实际使用感受的,意见反馈绝对是一个很好 ...
【愚公系列】2022年02月微信小程序-Component组件的扩展
文章目录一.Component组件的扩展二.使用扩展三.案例解析一.Component组件的扩展 // behavior.js module.exports = Behavior({defin ...

【愚公系列】2022年11月微信小程序-表格组件使用

文章目录

前言

一、表格组件使用

1.基础用法

1.1 代码

1.2 效果

总结

【愚公系列】2022年11月微信小程序-表格组件使用相关推荐

最新文章

热门文章

【愚公系列】2022年11月 微信小程序-表格组件使用

文章目录

前言

一、表格组件使用

1.基础用法

1.1 代码

1.2 效果

总结

【愚公系列】2022年11月 微信小程序-表格组件使用相关推荐

最新文章

热门文章

【愚公系列】2022年11月微信小程序-表格组件使用

【愚公系列】2022年11月微信小程序-表格组件使用相关推荐