表格二维数组-带边框

太过爱你忘了你带给我的痛 2022-10-24 13:19 77阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]  
通过div展示border-bottom 实现不重复效果

<div
                            class="MyscrollbarS"
                            style="height: 500px; width: 400px"
                          >
                            <div
                              v-if="
                                item.additionalChargeDTOList &&
                                item.additionalChargeDTOList.length
                              "
                            >
                              <div
                                v-for="(
                                  innerItem, InnerItemIndex
                                ) in item.additionalChargeDTOList"
                                :key="InnerItemIndex"
                                style="
                                  border: solid 1px #eee;
                                  border-bottom: solid 1px #fff;
                                  display: flex;
                                  justify-content: space-between;
                                "
                              >
                                
                                <div
                                  style="
                                    padding: 8px;
                                    display: flex;
                                    align-items: center;
                                  "
                                >
                                  <span style="width: 130px; text-align: center">{ { 
                                    innerItem.feeName || "暂无"
                                  }}</span>
                                </div>
                                
                                
                                <div
                                  style="
                                    border-left: 1px solid #eee;
                                    width: 100%;
                                    text-align: center;
                                  "
                                >
                                  <div
                                    v-for="(
                                      SecinnerItem, SecInnerItemIndex
                                    ) in innerItem.cntypeChargeDTOList"
                                    :key="SecInnerItemIndex"
                                  >
                                    <div style="padding: 8px">
                                      <div>
                                        <span style="margin: 5px">
                                          { { 
                                            SecinnerItem.cntypeCode || "暂无"
                                          }}</span
                                        >
                                        <span>{ { 
                                          SecinnerItem.priceDesc || ""
                                        }}</span>
                                      </div>
                                    </div>
    
                                    
                                    <div
                                      v-if="
                                        !(
                                          SecInnerItemIndex ==
                                          innerItem.cntypeChargeDTOList.length - 1
                                        )
                                      "
                                      style="
                                        height: 1px;
                                        background: #eee;
                                        width: 100%;
                                      "
                                    ></div>
                                    
                                  </div>
                                </div>
                                
                              </div>
    
                              <div
                                style="height: 1px; background: #eee; width: 100%"
                              ></div>
                              
                              <div style="height: 20px"></div>
                            </div>
                            <div style="text-align: center" v-else>暂无内容</div>
                          </div>

data

"item":[
            { 
                "cntypeOfferPriceDTOS":[
                    { 
                        "cntypeCode":null,
                        "currency":"CNY",
                        "price":100
                    },
                    { 
                        "cntypeCode":null,
                        "currency":"CNY",
                        "price":100
                    },
                ],
                "additionalChargeDTOList":[
                    { 
                        "feeName":"FAF(燃油附加费)",
                        "cntypeChargeDTOList":[
                           
                            { 
                                "cntypeCode":null,
                                "priceDesc":"CNY1.00/柜"
                            },
                            { 
                                "cntypeCode":null,
                                "priceDesc":"CNY1.00/柜"
                            }
                        ]
                    },
                    { 
                        "feeName":"LSS(低硫附加费)",
                        "cntypeChargeDTOList":[
                           
                            { 
                                "cntypeCode":null,
                                "priceDesc":"CNY1.00/柜"
                            },
                            { 
                                "cntypeCode":null,
                                "priceDesc":"CNY1.00/柜"
                            }
                        ]
                    },
                  
                   
                  
                 
                ],
            } ]

css

.MyscrollbarS { 
      overflow: auto;
      height: 200px;
      padding-right: 10px;
      &::-webkit-scrollbar { 
        width: 3px;
      }
      &::-webkit-scrollbar-thumb { 
        //里面的中间条
        background: #409eff;
      }
      /*定义滚动条轨道 内阴影+圆角*/
      &::-webkit-scrollbar-track { 
        //包裹中间条的地方
        border-radius: 10px;
        width: 3px;
        background-color: #fffdfd;
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221024/1ac004c2229c43b9b77226593f7e2b98.png