精华内容
下载资源
问答
  • 基于Vue的web端超长数据表格动态加载,开发的原因是web端表格对于大数据量疲软,出现卡顿问题。
  • vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1、分页,如下   2、如果我不想分页,又想在一页...
  • 制作如下表格数据渲染并实现点击删除事件 代码如下: body部分: <table border="1" cellspacing="1" cellpadding="1" id="tab" > <tr v-for="cl in classs"> <th>{{cl.id}}</th&...

    vue.js-表格数据的加载和操作

    一、要求:

    制作如下表格数据渲染并实现点击删除事件
    在这里插入图片描述

    二、代码

    代码如下:

    1. body部分:
    <table border="1" cellspacing="1" cellpadding="1" id="tab" >
    				<tr v-for="cl in classs">
    					<th>{{cl.id}}</th>
    					<th>{{cl.name}}</th>
    					<th>{{cl.inf}}</th>
    					<th>{{cl.behavior}}</th>
    				</tr>
    				<tr v-for="(item,index) in info">
    					<td>{{item.id}}</td>
    					<td>{{item.name}}</td>
    					<td>{{item.inf}}</td>
    					<td><button type="button" @click="del(index)">删除</button></td>
    				</tr>
    			</table>
    
    1. script部分:
    <script type="text/javascript">
    				new Vue({
    					el:'#tab',
    					data:{
    						classs:[
    							{id:'ID',name:'名字',inf:'描述',behavior:'操作'}
    						],
    					methods:{
    						del:function(index){
    							this.info.splice(index,1)
    						}
    					}
    				})
    			</script>
    

    正常效果图:

    在这里插入图片描述

    三、补充写法

    补充对于th的多种写法:

    1. body部分:
    <table border="1" cellspacing="1" cellpadding="1" id="tab" >
    				<tr v-for="cl in classs">
    					<th>{{cl.id}}</th>
    					<th>{{cl.name}}</th>
    					<th>{{cl.inf}}</th>
    					<th>{{cl.behavior}}</th>
    				</tr>
    				<tr>
    					<th>{{classs[0].id}}</th>
    					<th>{{classs[0].name}}</th>
    					<th>{{classs[0].inf}}</th>
    					<th>{{classs[0].behavior}}</th>
    				</tr>
    				<tr>
    					<th>{{msg.id}}</th>
    					<th>{{msg.name}}</th>
    					<th>{{msg.inf}}</th>
    					<th>{{msg.behavior}}</th>
    				</tr>
    				<tr v-for="(item,index) in info">
    					<td>{{item.id}}</td>
    					<td>{{item.name}}</td>
    					<td>{{item.inf}}</td>
    					<td><button type="button" @click="del(index)">删除</button></td>
    				</tr>
    			</table>
    
    1. script部分:
    <script type="text/javascript">
    				new Vue({
    					el:'#tab',
    					data:{
    						classs:[
    							{id:'ID',name:'名字',inf:'描述',behavior:'操作'}
    						],
    						msg:{id:'ID',name:'名字',inf:'描述',behavior:'操作'},
    						info:[
    							{id:'1',name:'a',inf:'amorous'},
    							{id:'2',name:'b',inf:'beautiful'},
    							{id:'3',name:'c',inf:'clever'},
    							{id:'4',name:'d',inf:'delicious'},
     						]
    					},
    					methods:{
    						del:function(index){
    							this.info.splice(index,1)
    						}
    					}
    				})
    			</script>
    

    补充后的效果图:
    在这里插入图片描述
    over!
    如有出入,欢迎指正!

    展开全文
  • element-loading-text = “数据正在加载中” element-loading-spinner = “el-icon-loading” 2.设置pictLoading_admin默认为false 3.当获取表格数据之前,设置pictLoading_admin为true 4.最终效果为 5.获取

    1.在el-table表格加入
    v-loading=“pictLoading_admin”
    element-loading-background = “rgba(0, 0, 0, 0.5)”
    element-loading-text = “数据正在加载中”
    element-loading-spinner = “el-icon-loading”
    在这里插入图片描述
    2.设置pictLoading_admin默认为false
    在这里插入图片描述
    3.当获取表格数据之前,设置pictLoading_admin为true
    在这里插入图片描述

    4.最终效果为
    在这里插入图片描述

    5.获取数据之后,设置pictLoading_admin为false,则去除正在加载数据的效果

    展开全文
  • vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
  • 有一个需求是当用户选择navigationview中的某一项时,右边的viewpager需要动态切换不同的adapter 发现直接setAdapter没有任何反应,加载数据还是旧的数据 折腾了半天只 ... table边框不显示 今日在做报表的时候发现,...

    Mac 显示隐藏文件

    defaults write com.apple.finder AppleShowAllFiles -bool true 此命令显示隐藏文件defaults write com.apple.finde ...

    Android View 事件分发机制 源码解析 (上)

    一直想写事件分发机制的文章,不管咋样,也得自己研究下事件分发的源码,写出心得~ 首先我们先写个简单的例子来测试View的事件转发的流程~ 1.案例 为了更好的研究View的事件转发,我们自定以一个My ...

    警惕多iframe下的同名id引起的诡异问题

    遇到个诡异bug,虽然bug中套bug,忽略次要bug,其中最诡异最典型的现象是多行window.top.$("#id")取值操作,其中有一行却取不到值.这个着实让我费解.因为用到 ...

    foreach与Iterable学习

    以前对于foreach的使用都是自然而然的感觉,没有深究过为什么可以用,什么时候可以用.最近才发现,原来那些可以使用的类,都是实现了Iterable接口的,否则根本就不能用. 下面是我之前学习时候写的 ...

    Tomcat - SSL操作大全

    简介 制作CSR申请文件 安装证书文件 客户证书认证 证书的备份(导出) 证书的恢复(导入)   简介 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,目前最新版本是6.0.20(截止 ...

    raspbian 静态IP

    edit file:  /etc/network/interfaces change line: iface eth0 inet dhcp iface eth0 inet static address ...

    NGUI悬浮菜单思路实践

    使用NGUI制作悬浮菜单.在UIAnchor锚点下的Offset建立背景和按钮菜单.同过InputMouseXY的位置判断.是否应该弹出和收回.OffSet在此处是作为TweenGameObject的 ...

    android viewpager change adapter ---在使用viewpager设置新的adapter的时候发现页面还是显示旧的adapter中的值

    有一个需求是当用户选择navigationview中的某一项时,右边的viewpager需要动态切换不同的adapter 发现直接setAdapter没有任何反应,加载的数据还是旧的数据 折腾了半天只 ...

    table边框不显示

    今日在做报表的时候发现,最后一行隐藏后整个报表的下边框会不显示,猜测是td的边框隐藏后但table并未设置边框,导致下边框没有出现.因此设置了table边框后问题解决.table和td的边框关系如下实 ...

    NIO和IO&lpar;转&rpar;

    java NIO由以下几个核心部分组成: Channels(通道) Buffers(缓冲区) Selectors(选择器) 其他 Channel和Buffer: 所有的IO再NIO中都从一个Chann ...

    展开全文
  • 主要介绍了基于vue实现web端超大数据表格的卡顿解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了Vue实现一个无限加载列表功能,需要的朋友可以参考下
  • vue表格滚动加载数据的几种方式 表格滚动加载数据本次将分两种类型进行讲解,分别是表格加载(即监听el-table中的滚动事件,好处是表格的表头可以固定住)、表格的父级元素绑定滚动时间加载数据。 一、监听...

    在vue中表格滚动加载数据的几种方式

    表格滚动加载数据本次将分两种类型进行讲解,分别是表格内加载(即监听el-table中的滚动事件,好处是表格的表头可以固定住)、表格的父级元素绑定滚动时间加载数据。

    一、监听表格内的滚动事件(可固定住表头)

    1、vue-infinite-loading

    使用文档说明链接:vue-infinite-loading

    好处是:可以固定住表头,监听表格的滚动,且每次滚动到底部加载完数据,滚动条依旧停留在上一次的浏览记录中

    坏处是:在首次如果数据没有能够撑开表格的高度,会一直触发滚动事件,等到数据撑开表格后,继续监听表格的滚动事件

    简单的使用步骤如下所示:

          a、安装vue-infinite-loading,

    npm install vue-infinite-loading -S

          b、设置表格的高度,利用el-table中的slot属性,在表格的最后将vue-infinite-loading插件放入,如下所示:

          <el-table :data="list" border fit highlight-current-row width="100%" class="pushtable" height="300px" id="pushtable" style="margin-top: 20px;">
          <el-table-column align="center" label="司机ID">
            <template slot-scope="scope">
              <span>{{ scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="累计推送轮数">
            <template slot-scope="scope">
              <span>{{ scope.row.totalPushRound}}</span>
            </template>
          </el-table-column>
          <infinite-loading
          slot="append"
          @infinite="infiniteHandlera"
          force-use-infinite-wrapper=".el-table__body-wrapper">
            <div slot="spinner" style="margin-top: 10px;margin-bottom: 10px;">加载中...</div>
            <div slot="no-more" style="margin-top: 10px;margin-bottom: 10px;">没有更多了</div>
         </infinite-loading>
        </el-table>
    
    
    // 滚动事件的实现
        infiniteHandlera ($state) {
          if (this.list.length < 20) {
            this.list.push({id: 3, totalPushRound: '测试'})
            setTimeout(() => {
              $state.loaded()
              console.log('12')
            }, 2000)
          } else {
            $state.complete()
          }
        }

    还有一个很nice的点,就是官方还提供了加载中、加载完毕等等插槽供君选择(需注意一个点,如一个页面有多个表格,需要更加具体的css选择器去找到,force-use-infinite-wrapper=".el-table__body-wrapper"这个说明是在监听类为.el-table__body-wrapper的表格)

     

    2、在vue中直接注册滚动事件,利用vue的directives,这样解决上面的在数据没有撑开表格之前,持续执行事件,这个注册事件仅仅针对于表格的滚动到底部的事件

      directives: {
        load: {
          bind (el, binding) {
            let p = 0
            let t = 0
            let down = true
            let selectWrap = el.querySelector('.el-table__body-wrapper')
            selectWrap.addEventListener('scroll', function () {
              // 判断是否向下滚动
              p = this.scrollTop
              if (t < p) {
                down = true
              } else {
                down = false
              }
              t = p
              // 判断是否到底
              const sign = 10
              const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
              if (scrollDistance <= sign && down) {
                binding.value()
              }
            })
          }
        }
      }

     

    二、监听表格外层元素的滚动事件

    1、其实上面两种也可以适用于除了表格之外的元素的滚动事件,因为这篇文章主要针对于表格的滚动事件,对于在此做了分类而已~

    2、利用el-element中提供的https://element.eleme.cn/#/zh-CN/component/infiniteScroll提供的无限滚动,具体使用方法,请看官方文档。这里说一下个人觉得不适用于表格的原因。但不确定自己的想法是否对的,如有错误,希望大佬们来指教~

           el-element中的无限滚动似乎是针对元素的添加才有效果的,也就是如果我每次只是给表格添加数据,他加载完就不会停留在上一次的浏览记录,而是在底部,导致会持续在加载(除非手动设置滚动条),直到数据加载完毕后才停止事件的执行。但是如果你是直接循环元素,类似<div  v-for="item  in list"></div>每次加载完就会停留在上一次的浏览记录了。

    3、vue-loadmore 和 vue-mugen-scroll

    使用文档链接:vue-loadmorevue-mugen-scroll

    写到这里有点累了,大家自己去看看文档吧,哈哈哈~

    展开全文
  • vue 表格加载

    2021-05-30 15:39:43
    vue 表格加载 <el-table :key="tableKey" :data="tableData" border fit highlight-current-row style="width: 100%" :height="tableHeight" ref="editTable" > <el-table-column align=...
  • vue比较常见的坑就是数据(后台返回)更新了,但是UI界面并没有更新,常见于以下情况: 一、数据为数组时 1.通过数组索引修改数组元素例如: 此时UI数据并不会刷新 2.修改数组长度时: 解决方案: 如果data为JSON...
  • 1. 下载vue-infinite-loading npm installvue-infinite-loading --save 2.在需要使用的文件中引入 import InfiniteLoading from 'vue-...4.在表格底部插入 <el-table :data="tableData" v-loading="lo...
  • vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿...
  • VUE项目中如何实现表格数据的懒加载vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验,这个时候常常有两种方法处理,1、分页处理如果...
  • 时隔3个月 终于要更新了 我发现网上写的很多都不尽人意或者比较散,这里更新我自己在项目中实现的滚动条到底部开始加载数据: mounted() { window.addEventListener("scroll", this.handleScroll, true); }, ...
  • [Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选) 能够解决的问题 在一个完整的数据数据渲染的 elementui 表格组件中,筛选输出数据 目录 布局代码 样式代码 vue代码 布局展示 功能实现 ...
  • window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const ...
  • 一.页面样式 二.数据库  三.前端页面代码 load=loadNode > [removed] export default { data () { return { props: { label: 'name', children: 'zones', ... loadNode (node, resolve) {
  • Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下
  • vue数据异步加载!坑

    2020-12-19 11:28:29
    【根本原因】: 我们发现这里的info是vuex中state管理加载数据,异步调用显示,然后vue渲染机制中: 异步数据先显示初始数据,再显示带数据数据, 所以上来加载info时候还是一个空对象如下 当渲染完成后,才...
  • 分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:...
  • 'S2-科技楼', desc: '上课喽', tableData3: [{ date: '2016-05-03', name: '张小虎', address: '上海市普陀区金沙江路 32421弄' }] }],` 3、外层表格的每一行可以展开一个子表格,子表格数据渲染不出来
  • 关于用鼠标滚动到某个位置我们就去加载数据...4.1 如果此时 标志位为true则 直接退出,不进行此时数据加载 关键代码如下: //...代码省略 //该div 为要滚动区域 <div class="daily-list" ref="list" @scroll="han
  • 下面小编就为大家分享一篇vue中实现先请求数据再渲染dom分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,039
精华内容 3,615
关键字:

vue表格数据加载

vue 订阅