位置: IT常识 - 正文

vue查询数据el-table不更新数据(vue 查询)

编辑：rootadmin

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

推荐整理分享vue查询数据el-table不更新数据(vue 查询)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue中怎么做查询功能,vue查询数据库,vue查询表格,vue查询数据后再额外添加是否展示按钮,vue中怎么做查询功能,vue查询数据库,vue查询数据库,拿到列表数据,vue查询数据库,内容如对您有帮助，希望把文章链接给更多的朋友！

如：查询名称为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>  </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函数部分小改动

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。

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