微信小程序表格组件--固定表头、自适应列宽、单元格点击事件支持、可滚动表格内容、斑马线样式

这篇具有很好参考价值的文章主要介绍了微信小程序表格组件--固定表头、自适应列宽、单元格点击事件支持、可滚动表格内容、斑马线样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

ScrollableFixedHeaderTable

一个具有固定表头、自适应列宽、单元格点击事件支持、可滚动表格内容、和斑马线样式的微信小程序表格组件。
项目地址:github项目地址,如果本项目对您有帮助,还请star,感谢

动机

浏览了不少微信小程序组件库,发现都没有表格组件,可能大家认为微信小程序上展示表格没有必要?之后又在github上找,发现不少组件只监听表格的行点击事件,而我需要监听某一具体单元格的点击事件,所以写下了此份组件

真机演示

小程序 表格插件,微信小程序,微信小程序,小程序

功能特性

  • 固定表头:表头始终保持在屏幕顶部,方便用户在查看表格数据时始终保持对列标题的参考;
  • 点击事件支持:支持单元格点击事件,以便在点击每个单元格时(除表头外)执行自定义操作;
  • 可滚动表格内容:表格内容可以在水平和垂直方向上滚动,以显示更多的数据;
  • 自适应列宽:根据最长的表头元素长度计算最小列宽,使表头与表格数据保持同宽;
  • 斑马线样式:表格行间隔的背景颜色不同,提高数据的可读性;
  • 可自定义表头背景颜色和单元格无数据时的显示内容。

属性列表

属性 类型 默认值 必填 说明
column-names Array [] yes 表头的列名数组
table-data Array [] yes 表格数据的二维数组
bind:celltap eventhandle - yes 点击每个单元格时(除表头外)执行自定义操作。其中,形参的e.detail.row得到当前单元格的行下标;e.detail.col得到当前单元格的列下标
stripe Boolean true no 是否显示斑马纹
borderline Boolean false no 是否显示边框
header-background String ‘#2d66cf’ no 表头的背景颜色
no-data-msg String ‘无’ no 单元格无数据时的显示内容

表格组件源码

  1. 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 < cols.length; i++) {
        if (cols[i].length > _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
    });
  }
});
  1. ScrollableFixedHeaderTable.json
{
  "component": true,
  "styleIsolation": "apply-shared",
  "usingComponents": {}
}
  1. ScrollableFixedHeaderTable.wxml
<!--components/ScrollableFixedHeaderTable/ScrollableFixedHeaderTable.wxml-->
<!-- 表头,此处禁用了表头的指针事件,即表头将不会响应触摸滚动事件。表头的滚动由表格内容的滑动引起。 -->
<scroll-view class="header" scroll-x="true" scroll-left="{{headerScrollLeft}}" style="pointer-events: none; position: fixed; z-index: 100;">
  <view class="tr">
    <view class="th" style="min-width: {{minWidth}}px; {{borderline ? 'border: 0.1px solid black;' : ''}} background:{{headerBackground}}" wx:for="{{columnNames}}" wx:key="*this" wx:for-item="colName">
      <text>{{colName}}</text>
    </view>
  </view>
</scroll-view>

<!-- 表格内容 -->
<!-- table数组的每个数组元素作为rowDatas,rowDatas是一个包含该行所有信息的数组,故还可以循环展开 -->
<scroll-view class="content" wx:if="{{columnNames.length != 0}}" scroll-x="true" bindscroll="syncScroll" style="padding-top: {{headerHeight}}rem;">

  <view class="tr {{stripe ? 'tr-stripe' : ''}}" wx:for="{{tableData}}" wx:key="*this" wx:for-index='rowIndex' wx:for-item="rowData" >
    <view class="td" style=" min-width: {{minWidth}}px; {{borderline ? 'border: 0.1px solid black;' : ''}} {{(stripe && (rowIndex % 2 == 1)) ? 'background: #f0eeee;' : '' }}" wx:for="{{rowData}}" wx:key="*this" wx:for-item="detail" wx:for-index='colIndex' bindtap="onCellTap" data-row="{{rowIndex}}" data-col="{{colIndex}}">
      {{(detail.length == 0 )? noDataMsg : detail}}
    </view>
  </view>

</scroll-view>
  1. ScrollableFixedHeaderTable.wxss
/* components/ScrollableFixedHeaderTable/ScrollableFixedHeaderTable.wxss */
.tr {
  display: flex;
  align-items: center;
  height: 3rem;
  width: 100%;
}

.td, .th {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  height: 100%;
}

.th {
  color: #fff;
  font-size: 15px;
}

.tr-stripe {
  background: #fff;
}
.tr-stripe:nth-child(2n) {
  background: #f0eeee;
}

.td {
  font-size: 12px;
}

使用示例

将以上4份源文件添加至当前目录下的同一文件夹ScrollableFixedHeaderTable,并对需要使用此组件的页面json文件添加以下代码以引入组件
index.json

{
  "usingComponents": {
    "scrollable-fixed-header-table": "./ScrollableFixedHeaderTable"
  }
}

在需要使用此组件的页面的WXML文件中,添加以下代码以使用组件:

index.wxml

<scrollable-fixed-header-table
  column-names="{{columnNames}}"
  table-data="{{table}}"
  bind:celltap="onCellTap"
  stripe="{{stripe}}"
  borderline="{{borderline}}"
  header-background="{{headerbg}}"
  no-data-msg=""
/>

index.js文章来源地址https://www.toymoban.com/news/detail-843375.html

Page({
  data: {
    stripe: true,
    borderline:false,
    headerbg:'#2d66cf',
    columnNames: ['Header 1', 'Header 2', 'Header 3', 'Header 4'],
    table: [
      ['', 'Row 1, Col 2', 'Row 1, Col 3', 'Row 1, Col 4'],
      ['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3', 'Row 2, Col 4'],
      ['Row 3, Col 1', 'Row 3, Col 2', 'Row 3, Col 3', 'Row 3, Col 4'],
      ['Row 4, Col 1', 'Row 4, Col 2', 'Row 4, Col 3', 'Row 4, Col 4'],
      ['Row 5, Col 1', 'Row 5, Col 2', 'Row 5, Col 3', 'Row 5, Col 4'],
      ['Row 6, Col 1', 'Row 6, Col 2', 'Row 6, Col 3', 'Row 6, Col 4'],
      ['Row 7, Col 1', 'Row 7, Col 2', 'Row 7, Col 3', 'Row 7, Col 4'],
      ['Row 8, Col 1', 'Row 8, Col 2', 'Row 8, Col 3', 'Row 8, Col 4'],
      ['Row 9, Col 1', 'Row 9, Col 2', 'Row 9, Col 3', 'Row 9, Col 4'],
      ['Row 10, Col 1', 'Row 10, Col 2', 'Row 10, Col 3', 'Row 10, Col 4'],
      ['Row 11, Col 1', 'Row 11, Col 2', 'Row 11, Col 3', 'Row 11, Col 4'],
      ['Row 12, Col 1', 'Row 12, Col 2', 'Row 12, Col 3', 'Row 12, Col 4'],
      ['Row 13, Col 1', 'Row 13, Col 2', 'Row 13, Col 3', 'Row 13, Col 4'],
      ['Row 14, Col 1', 'Row 14, Col 2', 'Row 14, Col 3', 'Row 14, Col 4'],
      ['Row 15, Col 1', 'Row 15, Col 2', 'Row 15, Col 3', 'Row 15, Col 4'],
      ['Row 16, Col 1', 'Row 16, Col 2', 'Row 16, Col 3', 'Row 16, Col 4'],
      ['Row 17, Col 1', 'Row 17, Col 2', 'Row 17, Col 3', 'Row 17, Col 4'],
      ['Row 18, Col 1', 'Row 18, Col 2', 'Row 18, Col 3', 'Row 18, Col 4'],
      ['Row 19, Col 1', 'Row 19, Col 2', 'Row 19, Col 3', 'Row 19, Col 4'],
      ['Row 20, Col 1', 'Row 20, Col 2', 'Row 20, Col 3', 'Row 20, Col 4'],

    ]
  },
  
  onCellTap: function (e) {
    console.log('点击的单元格行索引为:', e.detail.row, ' 列索引为:', e.detail.col);
  }

});

注意事项

  • 本组件仅适用于微信小程序,不支持其他平台;
  • 建议在使用此表格时,页面不展示除该表格以外的内容;
  • 没有处理表头点击事件的函数。

到了这里,关于微信小程序表格组件--固定表头、自适应列宽、单元格点击事件支持、可滚动表格内容、斑马线样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue+Element ui动态表格 实现表头自适应宽度

    根据业务需求,工作中会出现表头信息不固定,根据后台返回数据,我们要实现动态表格的实现 1. tableData为表格数据,tableHeader为表头数据。 2. 实现表头自适应宽度(二种方法)     ① 第一种通过动态width来定义,通过表头数据的遍历,将label的表头信息传入方法中     

    2024年02月15日
    浏览(7)
  • element-ui 表格el-table高度不是一个固定值时固定表头

    elementui中为表格组件提供了height属性实现固定表头 height可以为数字或者字符串,当为一个数字时表示固定的高度,也可以为百分比等字符串。 当height不是一个固定值时,如期望表格可以填充完页面剩余空间,并且固定表头时,可以通过给height属性赋值字符串形式实现。以页

    2024年01月25日
    浏览(18)
  • 给table组件(有固定列的时候)固定表头的功能实现

    1,增加height属性 在props中添加height属性, 保证在父组件中可以传值。如果父组件不传值,那么就是undefined 2,修改样式 最主要的是thead和tbody的样式,其中都是根据height去动态控制thead和tbody的样式,注意下面三个类所在的位置以及对应的样式。 cvn-table-head-row cvn-table-body-row

    2024年02月12日
    浏览(9)
  • JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】

    本文主要介绍关于 JS 或 Vue 中如何进行表头,列固定,可以根据实际应用场景应用于 原生 , Vue , 移动端 , 小程序 中 实际效果展示: 对于列的固定, table 中有对应的方法,但是如果列和表头都要固定,只能通过其他方式实现,如果您找到了更好的自身方法,还请斧正 表

    2024年02月09日
    浏览(12)
  • 【element UI 中的af-table-column组件】el-table-column如何自适应调整列宽,简单高效!!!

    在element UI框架中,组件el-table-column代表table的一列,有时候我们不想让里面的内容换行,网上的方法一般是需要给自适应列宽的column写一个动态的width,比较麻烦。 af-table-column是基于 element-ui 组件库的 el-table-column 组件, 支持自适应列宽功能 使用前得先导入,对于第二行“V

    2024年02月08日
    浏览(8)
  • vue element-ui表格组件动态多级表头

    实际项目的需求,需要根据后端动态获取的方式来初始化表格的表头包含哪些信息,且有很多信息是有规律的,所以我们需要Element UI动态生成多级表头。需要的效果图如下: 由于统计维度是可变化的(它可以是省市也可以是区县),所以需要专门设置一个表格的数据来保存

    2024年02月10日
    浏览(12)
  • 微信小程序图片宽高自适应

    微信小程序image有默认的宽高width:320rpx;height:240rpx;只设置width:100%是无效的,即使写了height:100%,依然无效 只要在image标签添加mode=\\\"widthFix\\\"属性,就可以做到高度自适应, 以下为效果图,宽度同理,设置高度后,将mode=\\\"heightFix\\\"即可  

    2024年02月12日
    浏览(11)
  • 微信小程序canvas绘制自适应图片,UniApp canvas绘制自适应图片

     需求:画布宽高为686 * 686 的正方形(可以进行调整根据自身需要来)             当图片宽度大于高度时,对图片宽度进行裁剪              当图片高度大于宽度时,对图片高度进行裁剪              我是用uniApp进行开发的,如果是小程序原生,直接把“uni” 改为 “

    2024年02月09日
    浏览(10)
  • 微信小程序绘制表格界面

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月05日
    浏览(12)
  • ant-table组件表格数据做合计行,并固定在表格底部

    某些时候,我们表格展示数值型数据的时候,可能会想做一个合计处理,这样能直观的了解到当前列的总计数据信息。 遍观 Table组件 ,官方是没有提供这个功能的,这就需要我们自己处理了 根据表格的特性,合计行作为当前表格的多余一行,需要处理当前页的数据、条数(

    2024年02月09日
    浏览(9)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包