微信小程序表格组件(锁头、锁列、样式、字体颜色等)

微信小程序表格组件(锁头、锁列、样式、字体颜色等)

因为微信不支持table组件，所以通过scroll-view组件来实现一个表格组件。

功能实现：

1. 提供了三种表格样式
2. 可以锁头
3. 可以锁第一列
4. 自定义表头宽度、高度、背景色、文字大小、字体颜色、是否加粗
5. 自定义表格宽度、高度
6. 表格内容的数字是否需要与0判断进行颜色区别(本人做金融，所以需要红绿色)

增加功能(2024年3月19日)

7. 可以修改表格最大高度(从父组件中动态传值，防止表格高度过小下滑时表头无法固定)
8. 表格数字可以转换单位
9. 表格数字可以转成百分百形式

增加功能（2024年3月21日）

10. 新增表格模式：可以横向或者纵向，用table_sl控制。具体前请见案例
11. 新增表头点击事件(head_click)和表格行(row_click)点击事件

解决Bug

1. 解决列表左滑列过多时，第一列无法锁住。(感谢“刘刘大顺ls”大佬提供的建议)

结果展示

注:该demo案例是table_sl为fir模式下

注:该demo案例是table_sl为sec模式下

组件代码：

wxml页面：

<!-- 小程序表格
参数说明:
totalHeight:表格最大高度(默认为250px)
table_sl:表格模式(提供两种:'fir'表示横向, 'sec'表示纵向)
line_sl:表格线条样式(提供三种:'all', 'fir', 'sec')
headList: 表头数据
table:表格数据
lock_header:是否锁表头(默认为true,锁头)
lock_first:是否锁第一列(默认为true,锁第一列)
table_width:表格宽度(默认为180rpx)
header_height:表头高度(默认为60rpx)
header_bg:表头背景色(默认为#fff,白色)
header_text_size:表头文字大小(默认为32rpx)
header_bold:表头文字是否加粗(默认为true,加粗)
header_text_color:表头文字颜色(默认为#111,黑色)
cell_height:表格内容高度(默认为100rpx)
is_unit:该列(table_sl='sec'时为行)表格内容(针对数字型|字符串型数字)是否需要转换成"亿,万"单位式
is_per:该列(table_sl='sec'时为行)表格内容(针对数字型|字符串型数字)是否需要转成百分比形式(默认保留两位小数)
注：如果表格内容中的数字不需要做不同标记，则使用字符串类型数字即可(颜色有：默认大于0为red，等于0为gray，小于0为green)
head_click:表头点击事件
row_click:表格行点击事件
-->
<view class="table_box" style="border-width: {
       {
       line_sl=='all'?'':(line_sl=='fir'?'0 0 1rpx 0':'0')}};">
  <scroll-view class="table_scroll" scroll-y scroll-x="{
    {lock_first}}" style="max-height:{
       {
       totalHeight}}px;" bindscrolltolower="handleScrollToLower">
    <!-- 表头部分 -->
    <view class="table_header" style="width: {
       {
       header_width}}rpx;{
       {
       lock_header?'position: sticky': ''}};{
       {
       header_bold?'font-weight: bold': ''}}">
      <view class="table_header_item" style="border-width: {
       {
       line_sl=='all'?'':'0'}};{
       {
       header_style}}" wx:for="{
    {headList}}" wx:key="index">
        <view wx:if="{
    {table_sl=='fir'}}" style="width: {
       {
       table_width[index]?table_width[index]:'180'}}rpx;" data-index="{
    {index}}" data-value="{
    {item}}" bind:tap="head_click">
          <block wx:if="{
    {uts.isArray(item)}}">
            <view style="font-size: {
       {
       header_text_size-4}}rpx;">{
  {item[0]}}</view>
            <view class="endEllipsis">{
  {item[1]}}</view>
          </block>
          <block wx:else>
            {
  {item}}
          </block>
        </view>
        <block wx:else>
          <text wx:if="{
    {index==0}}" style="width: {
       {
       table_width[index]?table_width[index]:'180'}}rpx">{
  {item}}</text>
          <view wx:else class="alignment" style="width: {
       {
       table_width[index]?table_width[index]:'180'}}rpx" data-index="{
    {index}}" data-value="{
    {item}}" bind:tap="head_click">
            <view>
              <view>{
  {item[1]}}</view>
              <view style="font-size: 18rpx; color: gray; font-weight: normal;">{
  {item[0]}}</view>
            </view>
            <text class="arrow" style="margin-left: 10rpx;" />
          </view