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

vue element InfiniteScroll 无限滚动 入坑记录的更多相关文章

  1. c#调用c++ dll 入坑记录

    1.DLL引用坑 [DllImport("NetDLL.dll", CharSet = CharSet.Ansi, CallingConvention = CallingConve ...

  2. IDEA+maven+javafx(java 1.8)入坑记录

    序 好久没写博客了,主要是因为懒,写博客真的是个难坚持的事.但今天登上来看了看,之前记录ctf写的wp竟然点击量这么多了,突然让我有了继续写下去的动力. 这段时间遇到了好多事,中间也有想过写几篇文章记 ...

  3. React Native入坑记录

    1.render中如果使用props,直接用this.props.xxx,如果是在JSX中,用{this.props.xxx} 2.警告each child in an array or iterat ...

  4. vue使用百度编辑器ueditor踩坑记录

    一.使用 下载放入项目 main.js引入 import '../static/UE/ueditor.config.js'; import '../static/UE/ueditor.all.js'; ...

  5. vue+element ui后台遇到的坑

    今天在用elementui做后台系统,遇到第一个坑:分页显示的是英文 按照官网组件复制下来的代码: <el-row :gutter="0" style="margi ...

  6. Windows To Go入坑记录

    什么是Windows To Go? https://en.wikipedia.org/wiki/Windows_To_Go 微软为了解决企业用户的需求而推出,可以在u盘或者移动硬盘启动window系统 ...

  7. vue cli3 + cube-ui 配置rem踩坑记录

    在install cube-ui时,选择了后编译,选中使用rem的时候会发现,怎么刷新页面的html字体被设置成了37.5px 感觉太大了,于是去寻找修改的办法,第一反应是webpack的配置,于是去 ...

  8. vue 无限滚动问题

    如今web开发中,无限加载是必需的一项功能,尤其是在移动端开发中,一个列表往往默认只加载10条,想看更多只能逐渐往下翻页.那么今天就看看如何在Vue-Cli中实现这个功能. 当前找到两个插件 1 el ...

  9. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

随机推荐

  1. Java EE数据持久化框架作业目录(作业笔记)

    第1章 MyBatis入门>>> 1.1.4 在Eclipse中搭建MyBatis基本开发环境 1.2.5 使用MyBatis查询所有职员信息 1.3.3 获取id值为1的角色信息. ...

  2. C# 绘制印章

    最近有个.net core的项目要绘制印章功能,一个公司印章,一个个人印章,于是抽了点时间自己写了一个,现在分享出来 using System; using System.Collections.Ge ...

  3. 了解C#的协变和逆变

    前言 在引用类型系统时,协变.逆变和不变性具有如下定义. 这些示例假定一个名为 Base 的基类和一个名为 Derived的派生类. Covariance 使你能够使用比原始指定的类型派生程度更大的类 ...

  4. Pytest_钩子方法setup、teardown、setup_class、teardown_class(8)

    pytest提供了以下 4 种钩子方法: 方法 说明 setup 在每一个测试用例执行之前,会执行此方法.一般用于每个用例相同的初始化工作. teardown 在每一个测试用例执行之后,会执行此方法. ...

  5. python (伪)私有属性和私有方法

    1.定义方式 在定义属性或方法时,在属性名或者方法名前增加两个下划线,定义的就是私有属性或方法. 2.为什么要定义私有属性和私有方法 在实际开发中,对象的某些属性或方法只希望在对象的内部被使用,而不希 ...

  6. Flask_路由(二)

    一.路由规则设置说明 flask框架使用route()装饰器配置路由. from flask import Flask app = Flask(__name__) @app.route("/ ...

  7. redis 加锁与解锁的详细总结,解决线程并发导致脏数据

    1.前言 对每个controller来说都是全新且单独的,原因是多线程,如果多个请求操作共有的数据,这样的并发操作会导致脏数据 怎么解决? mysql可以使用积极锁解决, 这里讲解的是redis的解决 ...

  8. 使用结构化克隆在 JavaScript 中进行深度复制

    在很长一段时间内,您不得不求助于变通方法和库来创建 JavaScript 值的深层副本.现在js提供 「structuredClone()」 一个用于深度复制的内置函数. 浏览器支持: 浅拷贝 在 J ...

  9. Protobuf使用--go和C#

    一.Go安装及使用protobuf工具 以下都是基于Linux系统: 1.安装 A) protobuf 编译工具安装 1.下载 protoBuf: cd $GOPATH/src/ git clone ...

  10. 微软的Serialize和Newtonsoft的SerializeObject比较

    微软的序列化反序列化组件出来已有好几年了,刚出来的时候各种吐槽.最近在优化代码,比较了一下微软的Serialize和Newtonsoft的SerializeObject,感觉大部分场景下可以用微软的序 ...