Vue query data el-table does not update data

Vue queries the data el-table but does not update the data

For example: Query data named abc, .js and .vue background printing can query this data, but el-table does not display this data
Error:
1. Uncaught TypeError: Cannot read properties of null (reading 'offsetHeight ')
2. Uncaught (in promise) TypeError: data. includes is not a function

For example: at this time, clear the input box and click Query (that is, you want to query all the data), the background can print out all the found data, but the el-table does not display these data. Only when the webpage is refreshed and reloaded will all the data appear, without pagination.
An error occurred:
1. Uncaught (in promise) TypeError: Cannot read properties of null (reading 'emitsOptions') runtime-core.esm-bundler.js:1090 (This error occurs as long as it is empty, saying it cannot be empty?)
2 .Uncaught (in promise) TypeError: instance.update is not a function (This error occurs after clicking the search, all the data can be found in the background, but the table does not display these data) For details, see
this question and answer https://ask.csdn .net/questions/7766918

solution

The code of the el-table part in the component has not been changed

<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" />

Some minor changes to js functions

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)
        })
      }

Minor changes to mockjs interface

// 获取单个用户信息
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)

The logic of the change is
to start with the simplest problem. I found that when the query displays all the data, there is no pagination. Looking at the code carefully, I found that every time I give data.userlist is all the data, not the data after paging. In other words, I did not use the two parameters data.pagesize and data.pagenum at all. So change the logic to:

• Mockjs is responsible for finding data, and returns a data array no matter what the situation is.
• After the js function (script part) gets the data, according to the two paging parameters data.pagesize and data.pagenum, the data displayed after traversing the pages is assigned to data.userlist.

Above, all problems are solved.
If I have to say why there is a problem, I don't know, it may be the problem of object assignment. Anyway, as long as it works.