微信小程序如何自定义table组件


Posted in Javascript onJune 29, 2019

背景

最近想要捣鼓一个自己的小程序,其中数据展示部分比较多,想用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地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
微信小程序如何调用图片接口API并居中显示
Jun 29 #Javascript
微信小程序如何调用json数据接口并解析
Jun 29 #Javascript
pm2启动ssr失败的解决方法
Jun 29 #Javascript
localstorage实现带过期时间的缓存功能
Jun 28 #Javascript
vue分页器组件编写方法详解
Jun 28 #Javascript
Vue分页器实现原理详解
Jun 28 #Javascript
vue实现分页栏效果
Jun 28 #Javascript
You might like
PHP 木马攻击防御技巧
2009/06/13 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
javascript实现小型区块链功能
2019/04/03 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
web.py获取上传文件名的正确方法
2014/08/26 Python
深入理解Python装饰器
2016/07/27 Python
python正则分析nginx的访问日志
2017/01/17 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
python实现dijkstra最短路由算法
2019/01/17 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
大一自我鉴定范文
2013/10/04 职场文书
学习心得体会
2014/01/01 职场文书
初中政治教学反思
2014/01/17 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
合作协议书范本
2014/10/25 职场文书