el-scrollbar 滚动条 使用

244 阅读1分钟
<div v-if="dataArr.length > 0" class="cardStyle">
  <el-scrollbar style="height:100%">
    <div v-for="(item,index) in dataArr" :key="index">
      <el-row class="my-2" :gutter="20">
        <el-col :span="24">{{item.createTime}}</el-col>
      </el-row>
      <el-row class="mb-4" :gutter="20">
        <el-col :span="12"><span class="font-blod">营销方式:</span>
          <el-tag type="primary" effect="dark">{{item.marketingType | dictFormats(marketingTypeDs) | withEmptyTxt() }}</el-tag>
        </el-col>
        <el-col :span="12"><span class="font-blod">用户意愿:</span>
          <el-tag type="success" effect="dark">{{item.userIntention | dictFormats(userIntentionDs) | withEmptyTxt() }}</el-tag>
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>
</div>
.cardStyle {
  height: 280px;
  .el-scrollbar {
    ::v-deep.el-scrollbar__wrap {
      overflow-x: hidden !important;
    }
    ::v-deep.is-horizontal {
      display: none;
    }
  }
}

注意:父级盒子必须要给指定高度。