微信小程序如何自定义table组件
更新时间：2019年06月29日 16:40:00 作者：甚时跃马归来
这篇文章主要介绍了微信小程序如何自定义table组件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
背景
最近想要捣鼓一个自己的小程序，其中数据展示部分比较多，想用table来做展示，但是微信小程序并没有table组件，于是就自己动手捣鼓了一个，勉强能用。
可以看看效果：
etable使用介绍
etable的使用很简单，分为 引入、使用、配置等3个阶段
1、引入
首先在要使用的页面中的json文件中配置如下：
{
"usingComponents": {
"etable" : "/compenents/etable/etable"
}
}
2、使用
在wxml页面需要用到的地方使用，如下：
<view style='padding : 10rpx;'>
<etable config="{{config}}"></etable>
</view>
3、配置
配置阶段主要配置config这个对象，这个对象中有这么几个属性，分别是
- content --etable数据，数组类型，必填
- titles --etable头部标题，数组类型，必填
- props --etable每一列对应的数据的key值，
- columnWidths --etable 每一列的列宽，值类型使用rpx，注意：(titles,props,columnWidths这3个数组的长度需保持一致)
- border --etable 是否有边框，Boolean类型，默认true
- stripe --etable 是否斑马纹，Boolean类型，默认true
- headbgcolor --etable 标题栏的背景颜色，String类型，默认#ffffff(即白色)
如下示例代码：
/**
* 页面的初始数据
*/
data: {
config:{
content :[],
titles: ['id', '名字', '年龄', '学校'],
props : ['id', 'name', 'age', 'school'],
columnWidths: ['80rpx', '140rpx', '120rpx','390rpx'],
border: true,
stripe : true,
// headcolor : '#dddddd'
}
},
onload:function(){
// 模拟数据
let content = [
{
id: 1,
name: 'pxh',
age: 13,
school: '暨南大学计算机'
},
{
id: 2,
name: 'ap',
age: 12,
school: '中山大学'
},
{
id: 3,
name: 'cf',
age: 12,
school: '华南农业大学'
},
{
id: 4,
name: '林江',
age: 14,
school: '上海交通大学'
}
]
let that = this
// 此处是模拟网络请求
setTimeout(function(){
that.setData({
'config.content' : content
})
},2000)
}
etable的stripe和border背景颜色修改
想要调整斑马纹的背景颜色，找到etable/etable.wxss中的39-45行，如下，可以自行修改
.etable-content-row-bg1{
background-color: #ffffff;
}
.etable-content-row-bg2{
background-color: #efefef;
}
想要调整border的颜色，需要在etable.etable.wxss中分别找到etable-header-column-border 和 etable-content-column-border这2个类，然后修改对应的颜色值即可，此处不多说了。
组件的github地址
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Ionic3 UI组件之autocomplete的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
本文通过实例代码给大家介绍了基于js实现浏览上传文件的代码，非常不错，代码简单易懂，具有参考借鉴价值，需要的朋友参考下吧2017-08-08
这篇文章主要介绍了JS正则验证多个邮箱的方法,且邮箱字符串使用分号隔开,非常简单实用,需要的朋友可以参考下2017-04-04
在开发网页的过程中,经常需要实现导航菜单的切换,下面这篇文章主要给大家介绍了关于前端导航栏不变切换局部页面的3种方法,文中给出了详细的代码示例,需要的朋友可以参考下2023-12-12
下面小编就为大家带来一篇js 判断一组日期是否是连续的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
在 JavaScript 的编程世界里,字符串和数组是极为常见的数据类型,在实际开发中,我们常常会遇到需要将字符串转换为字符数组的情况,接下来,我们将深入探讨如何使用 JavaScript 实现这一转换,同时结合代码示例详细分析不同方法的特点,需要的朋友可以参考下2025-04-04
保留两位小数：将浮点数四舍五入，取小数点后2位；如：2，会在2后面补上00.即2.00，感兴趣的朋友看下具体的实现思路及代码2013-04-04
这篇文章主要介绍了小程序多图列表实现性能优化的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了NodeJS Express框架中处理404页面一个方式,原理就是把404路由放在最后匹配,也就是路由中没有定义的全部转到404页面,需要的朋友可以参考下2014-05-05
本篇文章主要介绍了Webpack path与publicPath的区别详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论