element ui表格組件 擴展行展開時通過@expand-change異步加載數據,頁面不更新問題,第一次展開沒有數據,第二次點擊顯示

問題描述

在業務中我使用element ui 的表格組件,並利用擴展行來展示更多信息,比如每一行是一種模板的信息,展開行顯示一個與該模板關聯的文件列表

異步加載的思路是擴展行展開時觸發expand-change事件,在事件響應函數中去加載相應行的數據,但是當請求的數據返回並儲存在data裏後,頁面並沒有更新數據,也就是data裏已經有了文件列表的數據了,但擴展行展開後是空白的,這是因爲請求操作是異步的,而擴展行展開和事件觸發是同步的,頁面在數據返回前就已經渲染了dom了,所以沒有將新數據渲染到頁面上。

想讓頁面更新,就需要觸發vue對視圖的渲染,當我們二次展開該行,或者展開其他行時都會觸發視圖渲染,使得新數據在頁面上得以顯示,但無論是點擊兩次,還是展開其他行來更新當前行,都不是用戶體驗良好的解決辦法

於是我去官網搜索如何觸發視圖的渲染,並找到如下方法

 使用Vue.set來給data裏的屬性賦值,而不是直接用“=”來賦值,因爲Vue.set會立即觸發視圖更新,這樣就可以正常顯示異步請求返回的數據了

具體使用方法是在請求的回調函數中,如axios的then方法裏,使用this.$set(......)把返回結果賦值給data裏的某個屬性,而不是this.data.someAttr = res.data

如果有用的話,請點個贊哦

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章