微信小程序 uiapp 表格

项目场景：

微信小程序 uniapp 表格

• html

      <view class="tr bg-w">
        <view class="th" v-if="level == 1">分公司</view>
        <view class="th" v-else-if="level == 2">站经理</view>
        <view class="th">总客诉单</view>
        <view class="th ">无法处理/超时未处理</view>
        <view class="th ">操作</view>
      </view>
      <block v-for="(item, index) in listData" :key="index">
        <view class="tr">
          <view class="td">{{ item.name }}</view>
          <view class="td">{{ item.total }}</view>
          <view class="td">{{ item.unprocessing }}/{{ item.timeout }}</view>
          <view class="td under-line" @click="handelItemFunc(item)"
            >点击查看</view
          >
        </view>
      </block>
    </view>

• data

 listData: [
        {
          id: 10,
          name: "迟好",
          total: 12,
          unprocessing: 42,
          timeout: 38,
        },
        {
          id: 11,
          name: "小皇冠",
          total: 188,
          unprocessing: 2,
          timeout: 8,
        },
        {
          id: 11,
          name: "小树苗",
          total: 28,
          unprocessing: 9,
          timeout: 22,
        },
      ],

• css

/* 表格 */
.normal-table {
  border: 1px solid #e0e6ed;
  font-size: 12px;
  margin-top: 50upx;
  margin: 0 10upx;
}
/* 标题 */
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-family: PingFangSC-Regular, PingFang SC;
  border-bottom: 1px solid #e0e6ed;
  white-space: pre-wrap;
  text-align: center;
}

.tr:nth-last-child(1) {
  border: none;
}
.th {
  width: 20%;
  justify-content: center;
  color: rgba(44, 63, 83, 1);
  display: flex;
  align-items: center;
  height: 100upx;
  font-size: 20upx;
  border-right: 1px solid #e0e6ed;
}

.th:nth-child(1) {
  width: 20%;
}

.th:nth-child(2) {
  width: 20%;
}
.th:nth-child(3) {
  width: 40%;
}
.th:nth-child(4) {
  width: 20%;
  border-right: none;
}

/* 具体内容  */
.td {
  width: 20%;
  justify-content: center;
  text-align: center;
  font-size: 18upx;
  height: 80upx;
  line-height: 80upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(90, 104, 118, 1);
  border-right: 1px solid #e0e6ed;
}
.creatTime {
  line-height: 40upx;
}
.td:nth-child(1) {
  width: 20%;
}
.td:nth-child(2) {
  width: 20%;
}
.td:nth-child(4) {
  width: 20%;
  border-right: none;
}
.td:nth-child(3) {
  width: 40%;
}
.bg-w {
  background: rgba(245, 245, 245, 1);
}