uni-app is a very easy-to-use table control, which is very useful for layout display.

Usage is very simple, add a line of css to the page

/* Introduce table style sheet */
  @import "../../lib/helang-table.scss";

Complete code of the page

<template>
  <view class="content">
    <view class="itme-box">
      <view class="title">Default</view>
      <view class="h-table">
        <view class="h-tr h-tr-3 h-thead ">
          <view class="h-td">Theme</view>
          <view class="h-td">Class name</view>
          <view class="h-td">Remarks</view>
        </view>
        <view class="h-tr h-tr-3">
          <view class="h-td">Default</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">Cross-row cell container</view>
            </view>
            <view class="h-tr h-tr-2">
              <view class="h-td">-</view>
              <view class="h-td">Version 1.0.1</view>
            </view>
            <view class="h-tr h-tr-2">
              <view class="h-td">Author</view>
              <view class="h-td">River Waves</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">Alignment/dashed line/across columns/split columns</view>
      <view class="h-table h-table-dashed">
        <view class="h-tr h-tr-4 h-thead">
          <view class="h-td">Header 1</view>
          <view class="h-td">Header 2</view>
          <view class="h-td">Header 3</view>
          <view class="h-td">Header 4</view>
        </view>
        <view class="h-tr h-tr-4">
          <view class="h-td">Default horizontal and vertical centering</view>
          <view class="h-td">Dotted line</view>
          <view class="h-td">Divided into 4 columns</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;">I am a button</button>
          </view>
          <view class="h-td h-td-top">Top alignment</view>
          <view class="h-td h-td-bottom">Bottom alignment</view>
          <view class="h-td">-</view>
        </view>
        <view class="h-tr h-tr-4">
          <view class="h-td h-td-left">Align left</view>
          <view class="h-td h-td-right">Align right</view>
          <view class="h-td h-td-colspan">I crossed two columns today</view>
        </view>
      </view>
    </view>
    
    <view class="itme-box">
      <view class="title">Fixed columns</view>
      <view class="h-table">
        <view class="h-tr h-thead">
          <view class="h-td" style="width: 140rpx;">Fixed columns</view>
          <view class="h-td h-td-colspan">Activity column</view>
        </view>
        <view class="h-tr">
          <view class="h-td" style="width: 140rpx;">140rpx</view>
          <view class="h-td h-td-colspan">Add cross-column class names to automatically fill the remaining width</view>
        </view>
      </view>
    </view>
    
    <view class="itme-box">
      <view class="title">Theme</view>
      <view class="h-table h-table-primary">
        <view class="h-tr h-tr-2 h-thead">
          <view class="h-td">Theme name</view>
          <view class="h-td">Class name</view>
        </view>
        <view class="h-tr h-tr-2">
          <view class="h-td">Preferences</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">Theme name</view>
          <view class="h-td">Class name</view>
        </view>
        <view class="h-tr h-tr-2">
          <view class="h-td">Success</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">Theme name</view>
          <view class="h-td">Class name</view>
        </view>
        <view class="h-tr h-tr-2">
          <view class="h-td">General information</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">Theme name</view>
          <view class="h-td">Class name</view>
        </view>
        <view class="h-tr h-tr-2">
          <view class="h-td">Warning</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">Theme name</view>
          <view class="h-td">Class name</view>
        </view>
        <view class="h-tr h-tr-2">
          <view class="h-td">Danger</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">
  /*Introduce table style sheet */
  @import "../../lib/helang-table.scss";
  
  
  /* Start sample style */
  .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);
      }
    }
  }
  /* End of sample style */
</style>

helang-table.scss

/*
 * uni-app table style sheet
 *Author:helang
 * Email: [email protected]
*/


.h-table{
  /* OK */
  .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;
    
    /* Arrange in equal proportions, columns 1-6 */
    @for $i from 1 through 6
    {
       &-#{$i}{
        >.h-td{
          width:(100% / $i);
        }
      }
    }
    
     + .h-tr{
      border-top-style: none;
    }
  }
  /* Cell */
  .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;
    
    /* span columns */
     &-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;
        }
        
         & amp; + .h-tr{
          border-top-width: 1px;
          border-top-style: solid;
        }
      }
    }
    
    /* Align content top */
     &-top{
      align-items: flex-start;
      align-content:flex-start;
    }
    /* Align content to bottom */
     &-bottom{
      align-items: flex-end;
      align-content:flex-end;
    }
    /* Align content to the left */
     &-left{
      justify-content: flex-start;
    }
    /* Align content to the right */
     &-right{
      justify-content: flex-end;
    }
  }
  /* Header */
  .h-thead{
    background-color: #e6e6e6;
  }
  
  /* Table dotted line */
   &-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;
      }
    }
  }
  
  /* Table theme Map, colors are taken from 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
    )
  );
  
  /* Generate theme code */
  $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);
      }
    }
  }
}

Mao Mao’s inner thoughts

Garfield’s VFP|Fox Friends Club is accepting submissions

Garfield’s VFP, use VFP not limit VFP, use VFP to mix everything. Whether it’s VFP, JS, or C, as long as it can be mixed, it can be published.

Business models, sales skills, demand planning, and product design knowledge can all be published.

The tentative red envelope is 50 yuan for 1,000 words, and the red envelope will be bigger for excellent articles. Once published, the red envelope will be available.

How to help people using VFP?

People who use VFP include both professionals and non-professionals. Many of them are actually novices and ask questions that are novices. If the questions are wrong, we guide them to ask the right questions. In any case, please don’t laugh at them and say they don’t even look for help. They can’t even answer such a simple question. It’s very low to laugh at others and not be able to come up with constructive answers.

Whether we have work needs or have our own software, we all need real knowledge. How to let more people learn real VFP knowledge? Just like it, watch it, and forward it to friends, it would be even better .

Garfield’s vfp advocates the use of “VFP minimalist hybrid development, writing less code and getting started quickly, using VFP, but not limited to VFP, and mixed development of various languages”.

I have led more than a hundred members to successfully master the black technology of VFP and entered the era of mobile Internet. Next, we will enter the field of Internet of Things.

Recruitment of Huyouhui community members in 2023 continues

The benefits obtained by community members include:

Qiyou three-layer development framework commercial version (cat box), lifetime free upgrades, lifetime technical support.

The open recorded and broadcast courses include:

WeChat applet, WeChat public account development, H5 APP development, Extjs BS development, VFP object-oriented advancement, VFP middle layer development.

Source code resources include:

Payment component source code, SMS source code, permission component source code, and some complete system source codes. This can be sold separately, please contact me if you need it.

Members can also connect resources within the group and receive subcontracting, cooperation and other commercial or technical services.

The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Mini program skill treeHomepageOverview 7890 people are learning the system