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

最新推荐文章于 2024-10-09 21:48:33 发布

鼠年大吉

最新推荐文章于 2024-10-09 21:48:33 发布

阅读量2.3k

点赞数

分类专栏：小程序文章标签：自定义表格

本文链接：https://blog.csdn.net/qq_35573326/article/details/84788192

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

纯属娱乐

<!--index.wxml-->
<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"
  }
}

运行结果：