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
vue element InfiniteScroll 无限滚动 入坑记录的更多相关文章
- c#调用c++ dll 入坑记录
1.DLL引用坑 [DllImport("NetDLL.dll", CharSet = CharSet.Ansi, CallingConvention = CallingConve ...
- IDEA+maven+javafx(java 1.8)入坑记录
序 好久没写博客了,主要是因为懒,写博客真的是个难坚持的事.但今天登上来看了看,之前记录ctf写的wp竟然点击量这么多了,突然让我有了继续写下去的动力. 这段时间遇到了好多事,中间也有想过写几篇文章记 ...
- React Native入坑记录
1.render中如果使用props,直接用this.props.xxx,如果是在JSX中,用{this.props.xxx} 2.警告each child in an array or iterat ...
- vue使用百度编辑器ueditor踩坑记录
一.使用 下载放入项目 main.js引入 import '../static/UE/ueditor.config.js'; import '../static/UE/ueditor.all.js'; ...
- vue+element ui后台遇到的坑
今天在用elementui做后台系统,遇到第一个坑:分页显示的是英文 按照官网组件复制下来的代码: <el-row :gutter="0" style="margi ...
- Windows To Go入坑记录
什么是Windows To Go? https://en.wikipedia.org/wiki/Windows_To_Go 微软为了解决企业用户的需求而推出,可以在u盘或者移动硬盘启动window系统 ...
- vue cli3 + cube-ui 配置rem踩坑记录
在install cube-ui时,选择了后编译,选中使用rem的时候会发现,怎么刷新页面的html字体被设置成了37.5px 感觉太大了,于是去寻找修改的办法,第一反应是webpack的配置,于是去 ...
- vue 无限滚动问题
如今web开发中,无限加载是必需的一项功能,尤其是在移动端开发中,一个列表往往默认只加载10条,想看更多只能逐渐往下翻页.那么今天就看看如何在Vue-Cli中实现这个功能. 当前找到两个插件 1 el ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
随机推荐
- Java EE数据持久化框架作业目录(作业笔记)
第1章 MyBatis入门>>> 1.1.4 在Eclipse中搭建MyBatis基本开发环境 1.2.5 使用MyBatis查询所有职员信息 1.3.3 获取id值为1的角色信息. ...
- C# 绘制印章
最近有个.net core的项目要绘制印章功能,一个公司印章,一个个人印章,于是抽了点时间自己写了一个,现在分享出来 using System; using System.Collections.Ge ...
- 了解C#的协变和逆变
前言 在引用类型系统时,协变.逆变和不变性具有如下定义. 这些示例假定一个名为 Base 的基类和一个名为 Derived的派生类. Covariance 使你能够使用比原始指定的类型派生程度更大的类 ...
- Pytest_钩子方法setup、teardown、setup_class、teardown_class(8)
pytest提供了以下 4 种钩子方法: 方法 说明 setup 在每一个测试用例执行之前,会执行此方法.一般用于每个用例相同的初始化工作. teardown 在每一个测试用例执行之后,会执行此方法. ...
- python (伪)私有属性和私有方法
1.定义方式 在定义属性或方法时,在属性名或者方法名前增加两个下划线,定义的就是私有属性或方法. 2.为什么要定义私有属性和私有方法 在实际开发中,对象的某些属性或方法只希望在对象的内部被使用,而不希 ...
- Flask_路由(二)
一.路由规则设置说明 flask框架使用route()装饰器配置路由. from flask import Flask app = Flask(__name__) @app.route("/ ...
- redis 加锁与解锁的详细总结,解决线程并发导致脏数据
1.前言 对每个controller来说都是全新且单独的,原因是多线程,如果多个请求操作共有的数据,这样的并发操作会导致脏数据 怎么解决? mysql可以使用积极锁解决, 这里讲解的是redis的解决 ...
- 使用结构化克隆在 JavaScript 中进行深度复制
在很长一段时间内,您不得不求助于变通方法和库来创建 JavaScript 值的深层副本.现在js提供 「structuredClone()」 一个用于深度复制的内置函数. 浏览器支持: 浅拷贝 在 J ...
- Protobuf使用--go和C#
一.Go安装及使用protobuf工具 以下都是基于Linux系统: 1.安装 A) protobuf 编译工具安装 1.下载 protoBuf: cd $GOPATH/src/ git clone ...
- 微软的Serialize和Newtonsoft的SerializeObject比较
微软的序列化反序列化组件出来已有好几年了,刚出来的时候各种吐槽.最近在优化代码,比较了一下微软的Serialize和Newtonsoft的SerializeObject,感觉大部分场景下可以用微软的序 ...