vue数据更新页面不刷新（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  




  




  




  。

以上   

     

     

     ，所有问题都解决了 


  


  


  

。

如果非要说为啥出现问题



  




  




  



，我也不知道  


  


  


，可能就是对象赋值的问题吧
     
     
     
。反正    
     
     
    ，能运行就行   




   




   




  。