uni-app 非常易用的表格控件，用来排版展示很好用

用法非常简单,页面添加一行css

/* 引入表格样式表 */
  @import "../../lib/helang-table.scss";

页面完整代码

<template>
  <view class="content">
    <view class="itme-box">
      <view class="title">默认</view>
      <view class="h-table">
        <view class="h-tr h-tr-3 h-thead ">
          <view class="h-td">主题</view>
          <view class="h-td">类名</view>
          <view class="h-td">备注</view>
        </view>
        <view class="h-tr h-tr-3">
          <view class="h-td">默认</view>
          <view class="h-td h-td-colspan h-td-rowspan">
            <view class="h-tr h-tr-2">
              <view class="h-td">h-td-rowspan</view>
              <view class="h-td">跨行单元格容器</view>
            </view>
            <view class="h-tr h-tr-2">
              <view class="h-td">-</view>
              <view class="h-td">版本1.0.1</view>
            </view>
            <view class="h-tr h-tr-2">
              <view class="h-td">作者</view>
              <view class="h-td">河浪</view>
            </view>
          </view>
        </view>
        <view class="h-tr h-tr-3">
          <view class="h-td">-</view>
          <view class="h-td">-</view>
          <view class="h-td">-</view>
        </view>
      </view>
    </view>
    
    <view class="itme-box">
      <view class="title">对齐/虚线/跨列/分列</view>
      <view class="h-table h-table-dashed">
        <view class="h-tr h-tr-4 h-thead">
          <view class="h-td">表头1</view>
          <view class="h-td">表头2</view>
          <view class="h-td">表头3</view>
          <view class="h-td">表头4</view>
        </view>
        <view class="h-tr h-tr-4">
          <view class="h-td">默认水平垂直居中</view>
          <view class="h-td">虚线</view>
          <view class="h-td">分4列</view>
          <view class="h-td"></view>
        </view>
        <view class="h-tr h-tr-4">
          <view class="h-td">
            <button style="font-size: 14px;padding: 30px 10px;line-height: 14px;">我是一个按钮</button>
          </view>
          <view class="h-td h-td-top">顶对齐</view>
          <view class="h-td h-td-bottom">底对齐</view>
          <view class="h-td">-</view>
        </view>
        <view class="h-tr h-tr-4">
          <view class="h-td h-td-left">左对齐</view>
          <view class="h-td h-td-right">右对齐</view>
          <view class="h-td h-td-colspan">老子今天跨两列</view>
        </view>
      </view>
    </view>
    
    <view class="itme-box">
      <view class="title">固定列</view>
      <view class="h-table">
        <view class="h-tr h-thead">
          <view class="h-td" style="width: 140rpx;">固定列</view>
          <view class="h-td h-td-colspan">活动列</view>
        </view>
        <view class="h-tr">
          <view class="h-td" style="width: 140rpx;">140rpx</view>
          <view class="h-td h-td-colspan">添加跨列类名，自动占满剩余宽度</view>
        </view>
      </view>
    </view>
    
    <view class="itme-box">
      <view class="title">主题</view>
      <view class="h-table h-table-primary">
        <view class="h-tr h-tr-2 h-thead">
          <view class="h-td">主题名</view>
          <view class="h-td">类名</view>
        </view>
        <view class="h-tr h-tr-2">
          <view class="h-td">首选项</view>
          <view class="h-td">h-table-primary</view>
        </view>
      </view>
      <view style="height: 20rpx;"></view>
      <view class="h-table h-table-success">
        <view class="h-tr h-tr-2 h-thead">
          <view class="h-td">主题名</view>
          <view class="h-td">类名</view>
        </view>
        <view class="h-tr h-tr-2">
          <view class="h-td">成功</view>
          <view class="h-td">h-table-success</view>
        </view>
      </view>
      <view style="height: 20rpx;"></view>
      <view class="h-table h-table-info">
        <view class="h-tr h-tr-2 h-thead">
          <view class="h-td">主题名</view>
          <view class="h-td">类名</view>
        </view>
        <view class="h-tr h-tr-2">
          <view class="h-td">一般信息</view>
          <view class="h-td">h-table-info</view>
        </view>
      </view>
      <view style="height: 20rpx;"></view>
      <view class="h-table h-table-warning">
        <view class="h-tr h-tr-2 h-thead">
          <view class="h-td">主题名</view>
          <view class="h-td">类名</view>
        </view>
        <view class="h-tr h-tr-2">
          <view class="h-td">警告</view>
          <view class="h-td">h-table-warning</view>
        </view>
      </view>
      <view style="height: 20rpx;"></view>
      <view class="h-table h-table-danger">
        <view class="h-tr h-tr-2 h-thead">
          <view class="h-td">主题名</view>
          <view class="h-td">类名</view>
        </view>
        <view class="h-tr h-tr-2">
          <view class="h-td">危险</view>
          <view class="h-td">h-table-danger</view>
        </view>
      </view>
    </view>
  </view>
</template>


<script>
  export default {
    data() {
      return {
        title: 'Hello'
      }
    },
    onLoad() {


    },
    methods: {


    }
  }
</script>


<style lang="scss">
  /* 引入表格样式表 */
  @import "../../lib/helang-table.scss";
  
  
  /* 示例样式开始 */
  .content {
    font-size: 28rpx;
    background-color: #f3f3f3;
    padding: 20rpx;
    
    .red{
      background-color: #DD524D;
      color: #fff;
      text-align: center;
    }
    
    .green{
      background-color: #42b983;
      color: #fff;
      text-align: center;
    }
    
    .blue{
      background-color: #007AFF;
      color: #fff;
      text-align: center;
    }
    
    .yellow{
      background-color: #ffaa00;
      color: #fff;
      text-align: center;
    }
    


    .itme-box {
      padding: 20rpx;
      background-color: #fff;
      margin-bottom: 20rpx;


      .title {
        padding-bottom: 20rpx;
        margin-bottom: 20rpx;
        border-bottom: #e5e5e5 solid 1px;
        line-height: normal;
      }
      
      .width-fill{
        width: 100%;
      }
      
      .preview-box{
        height: 400rpx;
        box-shadow: 0 0 4px rgba(0,0,0,0.3);
      }
    }
  }
  /* 示例样式结束 */
</style>

helang-table.scss

/*
 *  uni-app 表格样式表
 *  作者:helang
 *  邮箱:helang.love@qq.com
*/


.h-table{
  /* 行 */
  .h-tr{
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: center;
    
    border-color: #ccc;
    border-style: solid;
    border-width: 0;
    border-top-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    color: #333;
    
    /* 等比分列，1-6列 */
    @for $i from 1 through 6
    {
      &-#{$i}{
        >.h-td{
          width:(100% / $i);
        }
      }
    }
    
    + .h-tr{
      border-top-style: none;
    }
  }
  /* 单元格 */
  .h-td{
    box-sizing: border-box;
    padding: 3px;
    word-break:break-all;
    border-color: #ccc;
    border-style: solid;
    border-width: 0;
    border-right-width: 1px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-height: 64rpx;
    
    /* 跨列 */
    &-colspan{
      flex-grow: 1;
      width:0;
    }
    
    &-rowspan{
      // border: none;
      border-right-width: 0;
      padding: 0 !important;
      flex-wrap: wrap !important;
      
      >.h-tr{
        width: 100%;
        border-width: 0;
        
        .h-td{
          border-right-width: 1px;
        }
        
        & + .h-tr{
          border-top-width: 1px;
          border-top-style: solid;
        }
      }
    }
    
    /* 内容顶部对齐 */
    &-top{
      align-items: flex-start;
      align-content:flex-start;
    }
    /* 内容底部对齐 */
    &-bottom{
      align-items: flex-end;
      align-content:flex-end;
    }
    /* 内容左边对齐 */
    &-left{
      justify-content: flex-start;
    }
    /* 内容右边对齐 */
    &-right{
      justify-content: flex-end;
    }
  }
  /* 表头 */
  .h-thead{
    background-color: #e6e6e6;
  }
  
  /* 表格虚线 */
  &-dashed{
    .h-tr{
      border-top-style: dashed;
      border-left-style: dashed;
      border-bottom-style: dashed;
    }
    .h-td{
      border-right-style: dashed;
    }
    
    .h-td-rowspan{
      .h-tr + .h-tr{
        border-top-style: dashed;
      }
    }
  }
  
  /* 表格主题 Map，颜色摘自 Bootstrap */
  $theme-table:(
    primary:(
      color:#fff,
      bgColor:#337ab7,
      border:#2e6da4
    ),
    success:(
      color:#fff,
      bgColor:#5cb85c,
      border:#4cae4c
    ),
    info:(
      color:#fff,
      bgColor:#5bc0de,
      border:#46b8da
    ),
    warning:(
      color:#fff,
      bgColor:#f0ad4e,
      border:#eea236
    ),
    danger:(
      color:#fff,
      bgColor:#d9534f,
      border:#d43f3a
    )
  );
  
  /* 生成主题代码 */
  $theme-table-keys:map-keys($theme-table);
  @each $k in $theme-table-keys {
    $item:map-get($theme-table,$k);
    &-#{$k}{
      .h-tr{
        border-top-color: map-get($item,border);
        border-left-color: map-get($item,border);
        border-bottom-color: map-get($item,border);
        color: map-get($item,bgColor);
      }
      .h-td{
        border-right-color: map-get($item,border);
        
      }
      .h-thead{
        background-color: map-get($item,bgColor);
        color: map-get($item,color);
      }
    }
  }
}

猫猫的心里话

加菲猫的VFP|狐友会社群接收投稿啦

加菲猫的VFP，用VFP不局限VFP，用VFP混合一切。无论是VFP，还是JS，还是C，只要能混合起来，都可以发表。

商业模式，销售技巧、需求规划、产品设计的知识通通可以发表。

暂定千字50元红包，，优秀的文章红包更大，一经发表，红包到手。

如何帮助使用VFP的人？

用VFP的人，有专业的，有非专业了，很多人其实是小白，问出的问题是小白，如果问题不对，我们引导他们问正确的问题。无论如何请不要嘲笑他们说帮助都不看，这么简单的问题都不会，嘲笑别人不行，而无法提出建设性答案，是很low的。

我们无论工作需要，还是有自己的软件，都是是需要真正的知识，如何让更多人学习真正的VFP知识呢，只需要点赞，在看，能转发朋友圈就更好了。

加菲猫的vfp倡导用"VFP极简混合开发，少写代码、快速出活，用VFP，但不局限于VFP，各种语言混合开发"。

我已经带领一百多名会员成功掌到VFP的黑科技，进入了移动互联网时代，接下来我们要进入物联网领域。

2023年狐友会社群会员继续招募中

社群会员获取的权益有：

祺佑三层开发框架商业版（猫框），终身免费升级，终身技术支持。

开放的录播课程有：

微信小程序，微信公众号开发，H5 APP开发，Extjs BS开发，VFP面向对象进阶，VFP中间层开发。

源码类资源有：

支付组件源码，短信源码，权限组件源码，一些完整系统的源码。这个可以单独出售的，需要的可以联系我。

会员也可以实现群内资源对接，可以接分包，合作等各项商业或技术业务