vue element ui table loadリロードページレンダリングされない問題の別の解決策
11827 ワード
vue elementUI table怠惰ロード最後のサブデータページデータを削除しますか?ソリューション: vueでelement uiコンポーネントを使用するtableコンポーネントは、必要に応じてイベントごとにサブデータを段階的にロードし、load関数のコールバックで、1つ以上のデータの他のデータを削除することができます.サブデータが1つしかない場合、削除を実行すると、効果がありません.
この問題について、たくさんの資料を調べても結果が出なかったので、聞いてもみんなこの問題に遭遇したことがなくて、私はこのように幸運に出会って、本当につらいです.出会って現れたが、いつも解決しなければならないよ.私と自分の方法を探すのを捨てて、考え方を変えました.次の3つの方法があります.
ソリューション:
1、localtion.reload()ページをリフレッシュするという方法で問題は解決できますが、体験感が悪く、瞬間的に白いページの効果が出てくるので、よくない、よくない、重要なことを3回言って、あきらめます.2、this.$router.go(0)は、1つ目と同じです.体験感が悪くて、3、provide/inject方式で方法注入を行って、これで完璧になって、問題は解決して、体験感は良いです.perfect.
まとめ:問題は解決したが、なぜこの問題が発生したのか.iviewコンポーネントですか、それとも正しい方法が見つかりませんか.皆さん、噴き出してください...
この方法は一度ブログを見て収穫したもので、どのブロガーか覚えていませんが、感謝します.
this.$forceUpdate
は何の役にも立たない.<el-table
:data="userData"
style="width: 100%;text-align: center"
row-key="id"
border
:indent="30"
lazy
@current-change="expandChange"
:load="getChildrenData"
:tree-props="{children: 'children', hasChildren: 'children'}">
.......
</el-table
getChildrenData(tree, treeNode, resolve){
this.paramNodes=[tree, treeNode, resolve];
let v = this;
v.$http.get(this.API.permissionData,{params:{
parentId:tree.id
}})
.then((resp)=>{
console.log(resp.body.data);
if(resp.body.code=='000000'){
if(resp.body.data){
resolve(resp.body.data)
}else {
v.$Message.error(resp.body.info);
}
}else {
v.$Message.error(resp.body.info);
}
})
.catch(function(err) {
v.$Message.error(err.body.info)
});
remove (id) {
let v=this;
v.$http.delete(`${this.API.getPermissionData}/${id}/v1.0`).then((res)=>{
if(res.body.code=='000000'){
v.getChildrenData(...this.paramNodes);
v.initData();
this.$Message.success(' !')
}else {
v.$Message.error( res.body.info);
}
}).catch((err)=>{
v.$Message.error(err.body.info);
})
この問題について、たくさんの資料を調べても結果が出なかったので、聞いてもみんなこの問題に遭遇したことがなくて、私はこのように幸運に出会って、本当につらいです.出会って現れたが、いつも解決しなければならないよ.私と自分の方法を探すのを捨てて、考え方を変えました.次の3つの方法があります.
ソリューション:
1、localtion.reload()ページをリフレッシュするという方法で問題は解決できますが、体験感が悪く、瞬間的に白いページの効果が出てくるので、よくない、よくない、重要なことを3回言って、あきらめます.2、this.$router.go(0)は、1つ目と同じです.体験感が悪くて、3、provide/inject方式で方法注入を行って、これで完璧になって、問題は解決して、体験感は良いです.perfect.
export default {
name: "APP",
provide () {
return {
reload: this.reload
}
},
data () {
return {
Refresh: true
}
},
methods: {
reload () {
this.Refresh= false;
this.$nextTick(function () {
this.Refresh= true
})
}
}
}
this.reload() 。
まとめ:問題は解決したが、なぜこの問題が発生したのか.iviewコンポーネントですか、それとも正しい方法が見つかりませんか.皆さん、噴き出してください...
この方法は一度ブログを見て収穫したもので、どのブロガーか覚えていませんが、感謝します.