vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)的解決方案

更新時間：2022年12月15日 11:10:58 作者：謝長留

這篇文章主要介紹了vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)的問題及解決方案，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

vue查詢到數(shù)據(jù)el-table不更新數(shù)據(jù)

如：查詢名稱為abc的數(shù)據(jù)，.js及.vue后臺打印都可以查詢到此條數(shù)據(jù)，el-table卻不顯示該條數(shù)據(jù)
出現(xiàn)錯誤：
1.Uncaught TypeError: Cannot read properties of null (reading ‘offsetHeight’)
2.Uncaught (in promise) TypeError:data.includes is not a function

如：此時把輸入框清空再點查詢（即想要查詢所有數(shù)據(jù)），后臺可以打印出查到的全部數(shù)據(jù)，el-table卻不顯示這些數(shù)據(jù)。只有網(wǎng)頁刷新重新加載才會出現(xiàn)所有數(shù)據(jù)，且未分頁。
出現(xiàn)錯誤：
1.Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘emitsOptions’）runtime-core.esm-bundler.js:1090 （只要清空就出現(xiàn)這個錯誤，說是不能為空？）
2.Uncaught (in promise) TypeError: instance.update is not a function（點擊搜索后出現(xiàn)該錯誤，后臺可以查到全部數(shù)據(jù)，table卻不顯示這些數(shù)據(jù)）
具體的看這條問答https://ask.csdn.net/questions/7766918

解決方案

組件內(nèi)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 狀態(tài) -->
      </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函數(shù)部分小改動

const searchList = () => {
        //從第i個開始，數(shù)pagesize個，少于sum和length
        var i = data.searchParams.pagesize * (data.searchParams.pagenum - 1)        
        var sum = i + data.searchParams.pagesize
        //顯示的數(shù)據(jù)
        var user = []
        //取需要的數(shù)據(jù)
        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 中拉取數(shù)據(jù)
  // var userlist = JSON.parse(localStorage.getItem('userlist'))
  var userlist = getList()
  //判斷有無參數(shù)
  if (JSON.parse(options.body).query) {
    console.log("查單個")
    //查到的個數(shù)
    var sum = 0
    //查到的數(shù)據(jù)
    var user = []
    // 遍歷數(shù)組，返回id 與傳來 id 相當?shù)囊粋€對象    
    for (let index in userlist) {
      //字符串轉(zhuǎn)對象再去掉所有空格
      if (userlist[index].name == JSON.parse(options.body).query.replace(/\s+/g, "")) {
        console.log("查詢到了")
        //返回數(shù)組的話data.includes is not a function，數(shù)組≠proxy
        // var user=userlist[index]
        // return user
        user.push(userlist[index])
        sum++
      }
    }
    return user
  }
  else {
    console.log("查所有")
    return userlist
  }
}
Mock.mock('/getuser', 'post', getUser)

改動的邏輯是
從最簡單的問題入手，我發(fā)現(xiàn)當查詢顯示全部數(shù)據(jù)時也不分頁，仔細看看代碼，發(fā)現(xiàn)我每次給data.userlist的都是全部的數(shù)據(jù)，并不是分頁后的數(shù)據(jù)。也就是說，我完全沒有用到data.pagesize和data.pagenum兩個參數(shù)。于是把邏輯改成：

mockjs負責找數(shù)據(jù)，不管是何種情況都返回一個數(shù)據(jù)數(shù)組。
js函數(shù)（script部分）取到數(shù)據(jù)后，根據(jù)data.pagesize和data.pagenum兩個分頁參數(shù)，遍歷出分頁后顯示出的數(shù)據(jù)賦給data.userlist。

以上，所有問題都解決了。
如果非要說為啥出現(xiàn)問題，我也不知道，可能就是對象賦值的問題吧。反正，能運行就行。

到此這篇關于vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)的文章就介紹到這了,更多相關vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: