element的el-scrollbar用法

<template>
  <div>
    <el-dialog
      class="add-comparison"
      title="添加"
      :visible="visible"
      @update:visible="updateVisible"
      width="540px"
    >
      <div class="content">
        <div class="default-scrollbar">
          <el-scrollbar tag="div" class="bar_content">
            <el-checkbox-group v-model="checkList">
              <div
                class="bar_list"
                v-for="(item, index) in goodList"
                :key="index"
              >
                <el-checkbox :label="item" @change="addGroup(item, index)">
                  <div>
                    <div>测试的数据</div>
                  </div>
                </el-checkbox>
              </div>
            </el-checkbox-group>
            <div class="btn-more" v-if="isBtnMore" @click="loadMore">
              点击加载更多
            </div>
          </el-scrollbar>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/services/config/api";
export default {
  props: {
    visible: Boolean,
  },
  watch: {
    visible(val) {
      if (val) {
        this.isBtnMore = false;
        this.form.word = "";
        this.checkList = [];
        this.goodList = [];
        this.query();
      }
    },
  },
  data() {
    return {
      checkList: [],//选中的内容
      goodList: [], //初始化内容
      pageSize:10,
      page: 1,
      total: 0,
      isBtnMore: false, //是否加载更多
    };
  },
  methods: {
    init() {
     //接口请求
      api.query().then(data => {
        if (data && data.length > 0) {
          if (this.page == 1) {
            this.goodList = list;
            this.isBtnMore = totalSize > 10 ? true : false;
          } else {
            this.goodList.push(...list);
          }
        } else {
          this.goodList = [];
        }
        this.checkList = [];
        this.total = data.length;
      });
    },
    query() {
      this.page = 1;
      this.init();
    },
    loadMore() {
      this.isBtnMore = false;
      if (this.page * 10 < this.total) {
        this.isBtnMore = true;
        this.page++;
        this.init();
      }
    },
    addGroup(item, index) {
      console.log(item, index, this.checkList, "选中的商品");
    },
    submit() {//确定提交 },
    close() {
      this.updateVisible(false);
    },
    updateVisible(val) {
      this.$emit("update:visible", val);
    },
  },
};
</script>

<style lang="scss">
.add-comparison {
  .el-dialog .el-dialog__body {
    padding: 16px 15px 23px 20px;
  }
  .content {
    .default-scrollbar {
      height: 300px;
      width: 502px;
      border: 1px solid #f5e3d3;
      .bar_content {
        height: 300px;
        > .el-scrollbar__wrap {
          overflow: scroll;
          height: 100%;
          overflow-x: visible;
        }
      }
    }
    .bar_list {
      display: flex;
      align-items: baseline;
      padding: 5px 20px;
      cursor: pointer;
      .text-hide {
        margin-left: 10px;
      }
      .el-checkbox {
        display: flex;
        align-items: center;
        .el-checkbox__input {
          padding-top: 2px;
        }
        
      }
      .is-checked {
        .el-checkbox__label {
          color: #333;
        }
      }
    }
    .bar_list:first-child {
      padding-top: 10px;
    }
    .btn-more {
      text-align: center;
      padding: 10px 0;
      cursor: pointer;
    }
    .select-list {
      .el-checkbox__label {
        padding-bottom: 20px;
      }
    }
  }
}
</style>

效果如下