vue element InfiniteScroll 無限滾動 入坑記錄

   select_law_by_tag()
    {
        this.laws_loading.is_loading = true;
        this.laws_loading.no_more = false;
        this.extractForm.page = 1;
        getLawByTag(this.extractForm)
        .then(res=>{
          const {data} = res;
          this.laws_loading.is_loading = false;
          this.$nextTick(()=>{
            this.laws = data.data
          })
          
          if(data.last_page <= data.current_page)
          {
            console.log('no more true')
            this.laws_loading.no_more = true
          }
          this.laws_load();
        })
        .catch(error=>{})
    },
    laws_load() {
      this.laws_loading.is_loading = true;
      console.log('load law')
      if(this.laws_loading.no_more)
      {
        this.laws_loading.is_loading = false;
        return;
      }
      this.extractForm.page ++;
      getLawByTag(this.extractForm)
      .then(res=>{
        const {data} = res;
        this.laws_loading.is_loading = false;
        if(data.last_page <= data.current_page)
        {
          console.log('no more true load')
          this.laws_loading.no_more =  true
        }
        this.$nextTick(()=>{
          data.data.forEach((item)=>{
            this.laws.push(item)
          })
        })


      })
    },

　　

        <el-form-item label="法規" prop="synthesis_id" v-loading='laws_loading.is_loading'>
          <div>
            <el-radio-group
              v-model="extractForm.law_id" 
              v-infinite-scroll="laws_load"
              class="synthesis_selected"
              size="small"
            >
              <el-radio 
                border
                v-for="item in laws"
                :key="item.id"
                :label="item.id"
              >
              {{item.title}}
              </el-radio>
              <p v-if="laws_loading.is_loading" style="text-align: center; height: 1rem; font-size: 0.5rem">加載中...</p>
              <p v-if="laws_loading.no_more" style="text-align: center;height: 1rem; font-size: 0.5rem">沒有更多了</p>
            </el-radio-group>

          </div>

        </el-form-item>

　　css 如下

.synthesis_selected {display: block; max-height: 200px; overflow-y: scroll;}
.synthesis_selected .el-radio { margin:0.5rem;}

　　解決下拉失效的問題

主要是 下拉事件不能觸發導致，， 解決辦法是再 嵌套 觸發事件， 保證下拉到底事件觸發

 

 

 

 

最終解決代碼

 

或者  最正確的做法， 刷新組件， 讓組件填充container