iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue查询数据el-table不更新数据的解决方案
  • 693
分享到

vue查询数据el-table不更新数据的解决方案

vue查询数据el-table不更新数据vueel-table数据不更新 2022-12-15 12:12:57 693人浏览 薄情痞子
摘要

目录Vue查询到数据el-table不更新数据解决方案vue查询到数据el-table不更新数据 如:查询名称为abc的数据,.js及.vue后台打印都可以查询到此条数据,el-ta

vue查询到数据el-table不更新数据

如:查询名称为abc的数据,.js及.vue后台打印都可以查询到此条数据,el-table却不显示该条数据
出现错误:
1.Uncaught TypeError: Cannot read properties of null (reading ‘offsetHeight’)
2.Uncaught (in promise) TypeError:data.includes is not a function

如:此时把输入框清空再点查询(即想要查询所有数据),后台可以打印出查到的全部数据,el-table却不显示这些数据。只有网页刷新重新加载才会出现所有数据,且未分页。
出现错误:
1.Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘emitsOptions’)runtime-core.esm-bundler.js:1090 (只要清空就出现这个错误,说是不能为空?)
2.Uncaught (in promise) TypeError: instance.update is not a function(点击搜索后出现该错误,后台可以查到全部数据,table却不显示这些数据)
具体的看这条问答https://ask.csdn.net/questions/7766918

解决方案

组件内el-table部分代码未改

<el-table :data="userList" :key="key" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="role" label="角色" />      
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="editRow(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <!-- mg_state 状态 -->
      </el-table>
      <!-- 分页 -->
      <el-pagination v-model:currentPage="searchParams.pagenum" v-model:page-size="searchParams.pagesize"
        :page-sizes="[2,5,10,20]" :small="small" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="searchList" @current-change="searchList" />

js函数部分小改动

const searchList = () => {
        //从第i个开始,数pagesize个,少于sum和length
        var i = data.searchParams.pagesize * (data.searchParams.pagenum - 1)        
        var sum = i + data.searchParams.pagesize
        //显示的数据
        var user = []
        //取需要的数据
        axiOS.post("/getuser", (data.searchParams)).then(res => {
          // userListapi(data.searchParams).then(res=>{           
          if (res.data) {
            for (; i < res.data.length && i < sum; i++) {             
              user.push(res.data[i])
            }
            data.userList = user;
            data.total = res.data.length;
          }
        }).catch(err => {
          console.log(err)
        })
      }

mockjs接口部分小改动

// 获取单个用户信息
function getUser(options) {
  // 先从 localStorage 中拉取数据
  // var userlist = JSON.parse(localStorage.getItem('userlist'))
  var userlist = getList()
  //判断有无参数
  if (JSON.parse(options.body).query) {
    console.log("查单个")
    //查到的个数
    var sum = 0
    //查到的数据
    var user = []
    // 遍历数组,返回id 与传来 id 相当的一个对象    
    for (let index in userlist) {
      //字符串转对象再去掉所有空格
      if (userlist[index].name == JSON.parse(options.body).query.replace(/\s+/g, "")) {
        console.log("查询到了")
        //返回数组的话data.includes is not a function,数组≠proxy
        // var user=userlist[index]
        // return user
        user.push(userlist[index])
        sum++
      }
    }
    return user
  }
  else {
    console.log("查所有")
    return userlist
  }
}
Mock.mock('/getuser', 'post', getUser)

改动的逻辑是
从最简单的问题入手,我发现当查询显示全部数据时也不分页,仔细看看代码,发现我每次给data.userlist的都是全部的数据,并不是分页后的数据。也就是说,我完全没有用到data.pagesize和data.pagenum两个参数。于是把逻辑改成:

  • mockjs负责找数据,不管是何种情况都返回一个数据数组。
  • js函数(script部分)取到数据后,根据data.pagesize和data.pagenum两个分页参数,遍历出分页后显示出的数据赋给data.userlist。

以上,所有问题都解决了。
如果非要说为啥出现问题,我也不知道,可能就是对象赋值的问题吧。反正,能运行就行。

到此这篇关于vue查询数据el-table不更新数据的文章就介绍到这了,更多相关vue查询数据el-table不更新数据内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue查询数据el-table不更新数据的解决方案

本文链接: https://www.lsjlt.com/news/174931.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue查询数据el-table不更新数据的解决方案
    目录vue查询到数据el-table不更新数据解决方案vue查询到数据el-table不更新数据 如:查询名称为abc的数据,.js及.vue后台打印都可以查询到此条数据,el-ta...
    99+
    2022-12-15
    vue查询数据el-table不更新数据 vue el-table数据不更新
  • Vue数据更新视图不更新的几种解决方案小结
    目录Vue数据更新视图不更新的几种解决知识拓展对象属性的添加或删除异步更新队列Object.assign方法vue多层循环Vue更改了数据但是视图却没有更新Vue数据更新视图不更新的...
    99+
    2022-11-13
    Vue数据更新 Vue视图不更新 Vue数据
  • vue中数据更新视图不更新怎么解决
    本文小编为大家详细介绍“vue中数据更新视图不更新怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue中数据更新视图不更新怎么解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。vue数据更新视图不更新d...
    99+
    2023-07-02
  • vue增加数据不更新如何解决
    本篇内容主要讲解“vue增加数据不更新如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue增加数据不更新如何解决”吧!vue增加数据不更新的解决办法:1、使用“this.$set(tar...
    99+
    2023-07-04
  • Vue查询数据并通过bootstarp table渲染数据
    目录需求1.需求分析和步骤:2. 更新问题:3.columns属性需求 把页面进行改造把apptoken,appkey列隐藏,并且更改该列为企业秘钥,列下显示查看公司秘钥 如图: ...
    99+
    2024-04-02
  • 解决vue中数据更新视图不更新问题this.$set()方法
    目录vue数据更新视图不更新解决问题vue数据不更新的原因(数据更改了,但是视图没有更新)解决办法具体流程如下数组更新检测注意事项对象更改检测注意事项vue数据更新视图不更新 1.d...
    99+
    2024-04-02
  • elementUI的table表格改变数据不更新问题解决
    预期效果:点击输入框旁边的图标,输入框变为可输入状态;这里控制输入的 editable 字段不是 data 原有的属性,也不是 data 赋值时就存在的字段。 问题原因:在 Vue...
    99+
    2024-04-02
  • MybatisPlus 插入或更新数据时自动填充更新数据解决方案
    目录解决方案1、 实体类 2、拦截器MetaObjectHandler 3、测试参考文章Maven <parent> <group...
    99+
    2024-04-02
  • vue的设置data数据不更新怎么解决
    随着前端技术的不断发展,Vue.js已经成为了很多前端工程师的首选框架。不过,在使用Vue.js的过程中,有时会遇到vue的设置data数据不更新的问题。本文将对这个问题进行分析,并提供解决方法。一、问题的具体描述在Vue.js中,我们可以...
    99+
    2023-05-14
  • Vue组件更新数据v-model不生效的解决
    目录组件更新数据v-model不生效问题描述原因分析方法一方法二方法三v-model失效的问题解决办法组件更新数据v-model不生效 问题描述 在使用Vue双向绑定(v-model...
    99+
    2024-04-02
  • Vue怎么查询数据并通过bootstarp table渲染数据
    本文小编为大家详细介绍“Vue怎么查询数据并通过bootstarp table渲染数据”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue怎么查询数据并通过bootstarp table渲染数据”文章能帮助大家解决疑惑...
    99+
    2023-06-30
  • Python查询oracle数据库速度慢的解决方案
    如下所示: conn = cx_Oracle.connect('username/password@ip:port/servername') cur = conn.cursor(...
    99+
    2024-04-02
  • 浅谈Mysql大数据分页查询解决方案
    目录1.简介2.分页插件使用3.sql测试与分析3.1 limit现象分析3.2 解决之道4 测试时走过的坑4.1 百万数据内容都一样4.2 写sql时,把"77"...
    99+
    2024-04-02
  • elementUI的table表格改变数据不更新问题如何解决
    这篇文章主要介绍“elementUI的table表格改变数据不更新问题如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“elementUI的table表格改变数据不更新问题如何解决”文章能帮助大...
    99+
    2023-06-29
  • 大数据中自助查询的解决方案是什么
    今天给大家介绍一下大数据中自助查询的解决方案是什么。文章的内容小编觉得不错,现在给大家分享一下,觉得有需要的朋友可以了解一下,希望对大家有所帮助,下面跟着小编的思路一起来阅读吧。如果你曾经出国旅游,尤其是去欧洲自由行,有没有在餐馆点菜的惨痛...
    99+
    2023-06-04
  • mybatis缓存导致查询不到新数据怎么解决
    当使用MyBatis缓存查询数据时,有可能会出现查询不到新数据的情况。这是因为MyBatis默认开启了一级缓存(本地缓存),它会将查...
    99+
    2023-08-24
    mybatis
  • Vue组件更新数据v-model不生效怎么解决
    今天小编给大家分享一下Vue组件更新数据v-model不生效怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。组件更新数...
    99+
    2023-06-29
  • Vue怎么动态修改el-table的某列数据
    这篇文章主要介绍“Vue怎么动态修改el-table的某列数据”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue怎么动态修改el-table的某列数据”文章能帮助大家解决问题。动态修改el-tab...
    99+
    2023-06-30
  • Vue如何动态修改el-table的某列数据
    目录动态修改el-table的某列数据设置el-table某一列点击出现输入框可以编辑动态修改el-table的某列数据 1.对话框打开时调用函数open@opened="...
    99+
    2024-04-02
  • 海量数据查询方案设计
    设计海量数据查询方案需要考虑以下几个方面:1. 数据存储方案:选择适合海量数据存储的数据库或分布式存储系统,如Hadoop Dist...
    99+
    2023-09-20
    数据查询
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作