vue?項(xiàng)目頁(yè)面卡死原因排查分析
問題描述
點(diǎn)擊后臺(tái)管理某一菜單發(fā)現(xiàn)直接卡死,沒有其他報(bào)錯(cuò)信息,整個(gè)網(wǎng)頁(yè)鼠標(biāo)變?yōu)槭种笭顟B(tài)不能進(jìn)行任何操作
問題排查
首先是通過注釋代碼發(fā)現(xiàn)問題是出在以下代碼中
<basic-container>
<h4>教師指標(biāo)數(shù)據(jù)</h4>
<avue-crud ref="crud"
:data="tableData"
:table-loading="tableLoading"
:option="tableOption"
@refresh-change="refreshChange"
@search-change="searchChange">
<template slot-scope="scope"
slot="menu">
<el-button type="text"
icon="el-icon-view"
size="small"
@click="handleView(scope.row,scope.index)">查看
</el-button>
</template>
</avue-crud>
</basic-container>查看日志輸出

鎖定到問題是數(shù)據(jù)展示的data 需要array 但是卻拿到了Object
將數(shù)據(jù)展示方式tableData改為 table:[]數(shù)組類型進(jìn)行展示即可
data:{
return :{
tableData: []
]
}
getList() {
this.tableLoading = true;
this.tableData=[];
fetchList(this.listQuery).then(response => {
console.log("------------------"+response.data.data)
this.tableData.push(response.data.data) ;
this.tableLoading = false
})
},小結(jié)
這里有幾個(gè)問題
一個(gè)是avue 版本兼容的問題 貌似舊版本會(huì)兼容這種情況不會(huì)出現(xiàn)卡死的問題
大佬修改框架后出現(xiàn)的這個(gè)問題
另一個(gè)是返回值規(guī)范 如果使用表格 最好都返回list數(shù)組 不要返回單object類型導(dǎo)致出現(xiàn)類似
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vuex直接修改state、commit和dispatch修改state的用法及區(qū)別說明
這篇文章主要介紹了vuex直接修改state、commit和dispatch修改state的用法及區(qū)別說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
VuePress在build打包時(shí)window?document?is?not?defined問題解決
這篇文章主要為大家介紹了VuePress在build打包時(shí)window?document?is?not?defined問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
解決vue項(xiàng)目F5刷新mounted里的函數(shù)不執(zhí)行問題
今天小編就為大家分享一篇解決vue項(xiàng)目F5刷新mounted里的函數(shù)不執(zhí)行問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-11-11
elementUI?el-radio?無(wú)法點(diǎn)擊的問題解決
本文主要介紹了elementUI?el-radio?無(wú)法點(diǎn)擊的問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
在Vue-cli里應(yīng)用Vuex的state和mutations方法
今天小編就為大家分享一篇在Vue-cli里應(yīng)用Vuex的state和mutations方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09
vue限制輸入框只能輸入8位整數(shù)和2位小數(shù)的代碼
這篇文章主要介紹了vue限制輸入框只能輸入8位整數(shù)和2位小數(shù),文中我們使用v-model加watch 實(shí)現(xiàn)這一個(gè)功能,代碼簡(jiǎn)單易懂,需要的朋友可以參考下2019-11-11
vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式
這篇文章主要介紹了vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue.js或js實(shí)現(xiàn)中文A-Z排序的方法
下面小編就為大家分享一篇vue.js或js實(shí)現(xiàn)中文A-Z排序的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-03-03

