微信小程序开发之—跨栏表格

微信小程序没有表格组件,这里使用flex来自定义,先上效果图

wxml:

        <view class="row">
          <text class="text text1">人员费用</text>
          <view class="column2-wrap">
            <view class="column2" wx:for="{{data}}" wx:key="{{index}}">
              <block wx:if="{{item.arr.length == 1}}">
                <view class="text2">
                  <text class="text">{{item.name}}{{item.count}}人</text>
                </view>
                <view class="column3-wrap">
                  <view class="column-average">
                    <view class="text3">
                      <text class="text">{{item.arr[0].name}}{{item.arr[0].count}}人</text>
                    </view>
                    <view class="text3">
                      <text class="text" wx:if="{{item.arr[0].min_price === item.arr[0].max_price}}">{{item.arr[0].min_price/10000}}</text>
                      <text class="text" wx:else>{{item.arr[0].min_price/10000}}~{{item.arr[0].max_price/10000}}</text>
                    </view>
                    <view class="text3">
                      <text class="text" wx:if="{{item.min_price === item.max_price}}">{{item.min_price/10000}}</text>
                      <text class="text" wx:else>{{item.min_price/10000}}~{{item.max_price/10000}}</text>
                    </view>
                  </view>
                </view>
              </block>
              <block wx:elif="{{item.arr.length > 1}}">
                <view class="text2 text-average">
                  <text class="text">{{item.name}}{{item.count}}人</text>
                </view>
                <view class="column3-wrap">
                  <view class="column3" wx:for="{{item.arr}}" wx:key="idx" wx:for-item="itemDetail">
                    <view class="column3-text">
                      <text class="text">{{itemDetail.name}}{{itemDetail.count}}人</text>
                    </view>
                    <view class="column3-text">
                      <text class="text" wx:if="{{itemDetail.min_price === itemDetail.max_price}}">{{itemDetail.min_price/10000}}</text>
                      <text class="text" wx:else>{{itemDetail.min_price/10000}}~{{itemDetail.max_price/10000}}</text>
                    </view>
                  </view>
                </view>
                <view class="text4">
                  <text class="text" wx:if="{{item.min_price === item.max_price}}">{{item.min_price/10000}}</text>
                  <text class="text" wx:else>{{item.min_price/10000}}~{{item.max_price/10000}}</text>
                </view>
              </block>
            </view>
          </view>
        </view>

wxss:

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #dcdfe6;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.column2-wrap, .column3-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.row::after, .column2-wrap::after, .column3-wrap::after, .column3-text::after,
.column-average .text3::after, .total-cont view::after {
  content: "";
  position: absolute;
  top: -100%;
  bottom: -100%;
  right: 0;
}

.row::after, .column2-wrap::after, .column3-wrap::after, .column-average::after,
.total-cont view::after {
  left: 0;
  border-left: 1px solid #dcdfe6;
}

.column2-wrap {
  flex: 3.4;
}

.table-wrap .text1 {
  flex: 0.7;
}

.table-wrap .text2 {
  flex: 0.78;
}

.table-wrap .text-average {
  flex: 1.17;
}

.table-wrap .text3 {
  display: flex;
  flex: 1;
}

.column2, .column3, .column-average, .total-cont view {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  position: relative;
}

.column2, .column3 {
  border-bottom: 1px solid #dcdfe6;
}

.column2:last-child, .column3:last-child {
  border-bottom: none;
}

.column3-wrap {
  flex: 2;
}

.column3-text {
  flex: 1;
  justify-content: center;
  position: relative;
}

.column-average .text3 {
  flex: 1;
  justify-content: center;
  position: relative;
}

.row::after, .column3-text::after, .column-average .text3::after {
  border-right: 1px solid #dcdfe6;
}

.login-btn::after, .grade-box .btn-add::after,
.column-average .text3:last-child::after {
  border: none;
}

.table-wrap .text4 {
  flex: 1;
}

js:

data: {
    data: [
        {
            name: "二级建造师",
            count: 3, 
            min_price: 500, 
            max_price: 42000,
            arr: [
                {
                    name: "建筑工程", 
                    count: 3, 
                    min_price: "150", 
                    max_price: "150"
                }
            ] 
        },
        {
            name: "职称人员",
            count: 6, 
            min_price: 5100, 
            max_price: 42000,
            arr: [
                {
                    name: "机械", 
                    count: 3, 
                    min_price: "150", 
                    max_price: "150"
                },
                {
                    name: "机械", 
                    count: 3, 
                    min_price: "150", 
                    max_price: "150"
                },
                {
                    name: "机械", 
                    count: 3, 
                    min_price: "150", 
                    max_price: "150"
                },
                {
                    name: "机械", 
                    count: 3, 
                    min_price: "150", 
                    max_price: "150"
                },
                ...
            ] 
        },
        ...
    ]
}

猜你喜欢

转载自blog.csdn.net/qq_37300451/article/details/86220471