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

 更新时间:2022年12月15日 11:10:58   作者:谢长留  
这篇文章主要介绍了vue查询数据el-table不更新数据的问题及解决方案,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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不更新数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue 获取视频时长的实例代码

    vue 获取视频时长的实例代码

    这篇文章主要介绍了vue 获取视频时长的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue项目如何安装引入使用Vant

    Vue项目如何安装引入使用Vant

    Vant是一个专为移动端设计的轻量级组件库,自2017年开源以来,提供了Vue2、Vue3及多平台版本支持,安装Vant时需要注意版本兼容问题,Vue3项目应安装最新版Vant3,而Vue2项目则需安装Vant2,安装错误时,需卸载后重新安装正确版本
    2024-10-10
  • vue Antd 输入框Input自动聚焦方式

    vue Antd 输入框Input自动聚焦方式

    这篇文章主要介绍了vue Antd 输入框Input自动聚焦方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Nuxt pages下不同的页面对应layout下的页面布局操作

    Nuxt pages下不同的页面对应layout下的页面布局操作

    这篇文章主要介绍了Nuxt pages下不同的页面对应layout下的页面布局操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 详解vue中$router和$route的区别

    详解vue中$router和$route的区别

    这篇文章主要介绍了vue中$router和$route的区别,对vue感兴趣的同学,一定要看下
    2021-05-05
  • vue中的row布局靠右对齐

    vue中的row布局靠右对齐

    这篇文章主要介绍了vue中的row布局靠右对齐,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue中使用ts配置的具体步骤

    vue中使用ts配置的具体步骤

    这篇文章主要介绍了vue中使用ts配置的具体步骤,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • VUE2.0中Jsonp的使用方法

    VUE2.0中Jsonp的使用方法

    使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域。这篇文章主要介绍了VUE2.0中Jsonp的使用方法(前端),需要的朋友可以参考下
    2018-05-05
  • Vue使用PDF.js实现浏览pdf文件功能

    Vue使用PDF.js实现浏览pdf文件功能

    这篇文章主要为大家详细介绍了Vue如何使用PDF.js实现浏览pdf文件功能,文中的实现步骤讲解详细,具有一定的借鉴价值,需要的可以参考一下
    2023-04-04
  • 浅谈vue父子组件怎么传值

    浅谈vue父子组件怎么传值

    这篇文章主要介绍了浅谈vue父子组件怎么传值,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论