element ui v-infinite-scroll初始化加载所有数据问题

https://element.eleme.cn/2.14/#/zh-CN/component/infiniteScroll

官网提供的案例有问题，

在组件中加入了element ui 无限滚动。

复制官网的代码，发现一直加载。

原因：

1.ul标签的高度未设定。需设置。

2.未设置距离多少像素加载在ul标签中加入 infinite-scroll-distance=”10″ //距离10px加载。

<div class="infinite-list-wrapper"  style="overflow:auto;background: red;height: 5rem">

          <div v-infinite-scroll="load" infinite-scroll-disabled="disabled" infinite-scroll-distance="10">
              <div v-for="i in count" class="box goto">
                  <div class="inner">
                      <div class="titstatus" style="">
                          <span>xxxxxxxxx</span>
                          <span>未使用|已使用|已取消</span>
                      </div>

                      <div class="con" style="position: relative">
                          <div class="title">张三|男|183xxxxxxxx</div>
                          <div class="title2">开票内容 个人</div>

                      </div>

                  </div>
              </div>
          </div>

          <p v-if="loading">加载中...</p>
          <p v-if="noMore">没有更多了</p>

</div>

new Vue({
        el:'#app',
        data(){
            return{
                count: 10,
                loading: false
            }
        },
        computed: {
            noMore () {
                return this.count >= 40
            },
            disabled () {
                return this.loading || this.noMore
            }
        },
        mounted(){
            var self = this
            this.getList()


        },
        methods:{
            load () {
                this.loading = true
                setTimeout(() => {
                    this.count += 2
                    this.loading = false
                }, 2000)
            },
          
            getList(){
                // if(!this.formDate.trainStartTime){
                //   delete this.formDate.trainStartTime
                // }
                // this.formDate.userId = userId
                // var datastr={ "timestamp": Date.parse(new Date()),"posts":this.formDate};
                // var url = "/train/selectTrainDetailList";
                // var result = ajaxPostWithoutToken4(url,datastr);
                //
                //
                //
                // this.dataList = result.data
            }
        }
    })

https://www.csdn.net/tags/MtTaMg4sOTY2NTQ5LWJsb2cO0O0O.html