vue query data el-table does not update data
For example: if you query data with the name abc, you can query this data by printing on the background of .js and .vue, but the el-table does not display the data
An error occurred:
TypeError: Cannot read properties of null (reading ‘offsetHeight’)
(in promise) TypeError: is not a function
For example: at this time, clear the input box and click query (that is, you want to query all data), the background can print out all the data found, but the el-table does not display these data. All data will appear only when the web page refreshes and reloads, and is not paginated.
An error occurred:
(in promise) TypeError: Cannot read properties of null (reading ‘emitsOptions’):1090 (As long as you clear it, you will see this error. Can't be empty?)
(in promise) TypeError: is not a function (The error appears after clicking on search. The background can find all data, but the table does not display these data)
For details, please see this question/questions/7766918
Solution
Part of the el-table code in the component has not been changed
<el-table :data="userList" :key="key" style="width: 100%">
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="phone" label="Telephone" />
<el-table-column prop="email" label="Mail" width="180" />
<el-table-column prop="role" label="Role" />
<el-table-column label="operate">
<template #default="scope">
<el-button type="primary" @click="editRow()">edit</el-button>
<el-button type="danger" @click="deleteRow()">delete</el-button>
</template>
</el-table-column>
<!-- mg_state state -->
</el-table>
<!-- Pagination -->
<el-pagination v-model:currentPage="" v-model:page-size=""
:page-sizes="[2,5,10,20]" :small="small" layout="total, sizes, prev, pager, next, jumper" :total="total"
@size-change="searchList" @current-change="searchList" />Partial changes to js function
const searchList = () => {
// Starting from the i-th, count pagesize, less than sum and length var i = * ( - 1)
var sum = i +
//Displayed data var user = []
//Get the required data ("/getuser", ()).then(res => {
// userListApi().then(res=>{
if () {
for (; i < && i < sum; i++) {
([i])
}
= user;
= ;
}
}).catch(err => {
(err)
})
}Partial changes to the mockjs interface
// Get individual user informationfunction getUser(options) {
// Pull data from localStorage first // var userlist = (('userlist'))
var userlist = getList()
//Judge whether there are any parameters if (().query) {
("Search for single")
//The number of found var sum = 0
//The data found var user = []
// Iterate over the array and return an object with an id equivalent to the id passed for (let index in userlist) {
//Turn string to object and remove all spaces if (userlist[index].name == ().(/\s+/g, "")) {
("Queryed")
//If you return an array, is not a function, array ≠proxy // var user=userlist[index]
// return user
(userlist[index])
sum++
}
}
return user
}
else {
("Check all")
return userlist
}
}
('/getuser', 'post', getUser)
The logic of the change is
Starting from the simplest question, I found that when the query displays all the data, I do not paginate. I looked at the code carefully and found that every time I gave all the data, not the paginated data. That is to say, I didn't use the two parameters at all. So change the logic to:
- mockjs is responsible for finding data, and returns an array of data in any case.
- After the js function (script part) gets the data, the data displayed after traversing the page is assigned to iterate through the data displayed after the page is assigned to it.
All the above problems have been solved.
If I have to say why there is a problem, I don’t know, it may be a problem with object assignment. Anyway, it's fine if it can run.
This is the article about vue query data el-table not updating data. For more related vue query data el-table not updating data, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!