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

时间:2022-12-15 谢长留人气:0

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。

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

加载全部内容