|
ScrollableFixedHeaderTable
一个具有固定表头、自适应列宽、单元格点击事件支持和斑马线样式的微信小程序表格组件（原生开发）。 项目地址：github项目地址，如果本项目对您有帮助，还请star，非常非常感谢
动机
浏览了不少微信小程序组件库，发现都没有表格组件，可能大家认为微信小程序上展示表格没有必要？之后又在github上找，发现不少组件只监听表格的行点击事件，而我需要监听某一具体单元格的点击事件，所以写下了此份组件
版本更新
2024/6/6: 1. 修复了“无法在一页面内同时展示该表格及其余组件的问题”
真机演示
功能特性
固定表头：表头始终保持在屏幕顶部，方便用户在查看表格数据时始终保持对列标题的参考；点击事件支持：支持单元格点击事件，以便在点击每个单元格时（除表头外）执行自定义操作；可滚动表格内容：表格内容可以在水平和垂直方向上滚动，以显示更多的数据；自适应列宽：根据最长的表头元素长度计算最小列宽，使表头与表格数据保持同宽；斑马线样式：表格行间隔的背景颜色不同，提高数据的可读性；可自定义表头背景颜色和单元格无数据时的显示内容。
属性列表
属性类型默认值必填说明column-namesArray[]yes表头的列名数组table-dataArray[]yes表格数据的二维数组bind:celltapeventhandle-yes点击每个单元格时（除表头外）执行自定义操作。其中，形参的e.detail.row得到当前单元格的行下标；e.detail.col得到当前单元格的列下标stripeBooleantrueno是否显示斑马纹borderlineBooleanfalseno是否显示边框header-backgroundString‘#2d66cf’no表头的背景颜色no-data-msgString‘无’no单元格无数据时的显示内容
表格组件源码
ScrollableFixedHeaderTable.js
// components/ScrollableFixedHeaderTable/ScrollableFixedHeaderTable.js
Component({
/**
* 组件的属性列表
*/
properties: {
columnNames: {
type: Array,
value: []
},
tableData: {
type: Array,
value: []
},
//单元格无数据时的显示内容
noDataMsg:{
type:String,
value: '无'
},
//是否显示斑马纹
stripe:{
type:Boolean,
value:true
},
//是否显示列边框
borderline:{
type:Boolean,
value:false
},
//表头背景颜色
headerBackground:{
type:String,
value:'#2d66cf'
}
},
/**
* 组件的初始数据
*/
data: {
minWidth: 80,
headerHeight: 3,
headerScrollLeft: 0
},
/**
* 组件的方法列表
*/
methods: {
calcMinWidth: function (cols) {
//由最长的表头元素长度计算（表头与表格数据的）最小宽度
var _max = -1;
const padding = 5;
const charWidth = 15;
for (let i = 0; i _max) {
_max = cols[i].length;
}
}
const maxTextLength = _max;
return padding * 2 + charWidth * maxTextLength;
},
//实现表头的同步滑动
syncScroll: function (e) {
const scrollLeft = e.detail.scrollLeft;
this.setData({
headerScrollLeft: scrollLeft
});
},
onCellTap: function (e) {
this.triggerEvent('celltap', e.currentTarget.dataset);
}
},
ready: function () {
const minWidth = this.calcMinWidth(this.data.columnNames);
this.setData({
minWidth
});
}
});
ScrollableFixedHeaderTable.json
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {}
}
ScrollableFixedHeaderTable.wxml
|