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

相关文章

  • 解决前端调用后端接口返回200但数据返回的是html标签

    解决前端调用后端接口返回200但数据返回的是html标签

    这篇文章主要给大家介绍了关于如何解决前端调用后端接口返回200但数据返回的是html标签的相关资料,文中通过图文将解决的过程介绍的非常详细,对同样遇到这个问题的朋友具有一定的参考解决价值,需要的朋友可以参考下
    2024-05-05
  • vuedraggable实现拖拽功能

    vuedraggable实现拖拽功能

    这篇文章主要为大家详细介绍了vuedraggable实现拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue.js开发环境安装教程

    vue.js开发环境安装教程

    这篇文章主要为大家详细介绍了vue.js开发环境的安装教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vue-cli3 从搭建到优化的详细步骤

    vue-cli3 从搭建到优化的详细步骤

    这篇文章主要介绍了vue-cli3 从搭建到优化的详细步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • VUE 实现一个简易老虎机的项目实践

    VUE 实现一个简易老虎机的项目实践

    老虎机在很多地方都可以见到,可以设置中奖位置,以及中奖回调,本文主要介绍了VUE 实现一个简易老虎机的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

    vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

    这篇文章主要为大家详细介绍了vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Vue3根据动态字段绑定v-model的操作代码

    Vue3根据动态字段绑定v-model的操作代码

    最近在学习vue技术,开发表格的时候,想把表格做成组件,那查询条件就需要动态生成,这就遇到一个问题,vue怎么动态给v-model变量值,本文通过实例代码给大家介绍,对Vue3动态绑定v-model实例代码感兴趣的朋友一起看看吧
    2022-10-10
  • 关于vue-treeselect的基本用法

    关于vue-treeselect的基本用法

    vue-treeselect 是一个多选组件,具有对 Vue.js嵌套选项支持,这篇文章主要介绍了关于vue-treeselect的基本用法,需要的朋友可以参考下
    2022-11-11
  • Vue3 编写自定义指令插件的示例代码

    Vue3 编写自定义指令插件的示例代码

    这篇文章主要介绍了Vue3 编写自定义指令插件的示例代码,主要包括编写自定义插件,在 main.ts 中加载启用插件的代码介绍,对Vue3自定义指令插件相关知识感兴趣的朋友一起看看吧
    2022-07-07
  • Vue自定义指令结合阿里云OSS优化图片的实现方法

    Vue自定义指令结合阿里云OSS优化图片的实现方法

    这篇文章主要介绍了Vue自定义指令结合阿里云OSS优化图片的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11

最新评论