小程序引入weapp框架实现自制表格

太过爱你忘了你带给我的痛 2021-09-27 23:18 248阅读 0赞

纯属娱乐

<view>
      <i-tabs current="{
       { current }}" bindchange="handleChange">
        <i-tab key="1" title="待处理"></i-tab>
        <i-tab key="2" title="已反馈"></i-tab>
        <i-tab key="3" title="待验收"></i-tab>
        <i-tab key="4" title="已验收"></i-tab>
      </i-tabs>
      <view>
        <view style='width: 100%;  height: 1rpx' />
        <i-row>
          <i-col span="5" i-class="col-class">
            <view class="table_parent">ID</view>
          </i-col>
          <i-col span="5" i-class="col-class">
            <view class="table_parent">设备</view>
          </i-col>
          <i-col span="8" i-class="col-class">
            <view class="table_parent">时间</view>
          </i-col>
          <i-col span="6" i-class="col-class">
            <view class="table_parent">提交状态</view>
          </i-col>
        </i-row>
        <view style='width: 100%;  height: 1rpx' />
        <block wx:for="{
       {noticeList}}" wx:key="index" wx:for-index='index' wx:for-item="item">
          <i-row>
            <i-col span="5" i-class="col-class">
              <view class="table_parent">{
       {item.id}}</view>
            </i-col>
            <i-col span="5" i-class="col-class">
              <view class="table_parent">{
       {item.equipmentNickName}}</view>
            </i-col>
            <i-col span="8" i-class="col-class">
              <view class="table_parent">{
       {item.statusOneTime}}</view>
            </i-col>
            <i-col span="6" i-class="col-class">
              <view class="table_parent">{
       {item.status}}</view>
            </i-col>
          </i-row>
        </block>
      </view>
    </view>

/**index.wxss**/
    page {
    background-color: #d3d3d3;
    }
    
    .table_parent {
    	display:flex;
    	justify-content:center;
    	align-items:center;
      background: white;
      font-size:30rpx;
      text-align:center;
      box-sizing:border-box;
      color:#595a5e;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
    }
    .table {
      border: 1px solid #dadada;
      border-right: 0;
      border-bottom: 0;
      width: 98%;
    }
    
    .tr {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    
    .th, .td {
      padding: 10px;
      border-bottom: 1px solid #dadada;
      border-right: 1px solid #dadada;
      text-align: center;
      width: 100%;
    }
    
    .th {
      font-weight: 400;
      background-color: #dadada;
    }

{
      "navigationBarTitleText": "我的报修单",
      "usingComponents": {
        "i-cell-group": "../../dist/cell-group/index",
        "i-cell": "../../dist/cell/index",
        "i-tabs": "../../dist/tabs/index",
        "i-tab": "../../dist/tab/index",
        "i-row": "../../dist/row/index",
        "i-col": "../../dist/col/index"
      }
    }

运行结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTczMzI2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTczMzI2_size_16_color_FFFFFF_t_70]: /images/20210923/c2588724971a4c03add954953cd91feb.png