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