1. 程式人生 > >vue + layui 資料載入 渲染問題

vue + layui 資料載入 渲染問題

vue + layui 修改 獲取到值載入不出來 -- 渲染問題 

當vue與layui繫結傳值的時候就會出現這個問題

---尤其是通過ajax非同步動態獲取值

原因:vue的載入資料與layui不同步--當ajax資料量大的時候layui會提前渲染完畢

-- 解決方案:

等待最後的資料載入完畢後再進行渲染---原理:統計全域性的ajax請求,也就是ajax的活躍性,當狀態碼全部為 readyState = 4 後最後在執行ajaxStop()方法--詳情參考:http://www.365mini.com/page/jquery-ajaxstop.htm

//所有ajax執行完且頁面載入完判斷--ajaxStop--最後渲染
$(document).ajaxStop(function(){
    //console.log(2);
    vm.getRadio();//最後執行渲染
})

如果資料量大或者比較大的話,這種的方式並不是最好的解決方案 --- 如果有建議的話:請留言--共同學習

相關推薦

vue + layui 資料載入 渲染問題

vue + layui 修改 獲取到值載入不出來 -- 渲染問題  當vue與layui繫結傳值的時候就會出現這個問題 ---尤其是通過ajax非同步動態獲取值 原因:vue的載入資料與layui不同步--當ajax資料量大的時候layui會提前渲染完畢 --

Vue SSR服務端渲染資料快取

當我們在做vue的伺服器端渲染時,可能會碰到各種各樣的坑,記憶體洩露就是其中的一種。當然,導致記憶體洩露的原因有很多,不合理使用Axios也是其中一種,那下面我給大家介紹一下如何有效的避免請求中的記憶體洩露。 1. 安裝快取依賴: lru-cache npm install lru-cach

vue修改資料頁面不重新渲染

使用vue,遇到幾次修改了物件的屬性後,頁面並不重新渲染,場景如下: <template  v-for="item in tableData">               <div :class=

vue.js未定義 - 已經獲取到資料渲染在頁面上,但是警告未定義

[Vue warn]: Error in render: "TypeError: Cannot read property 'avatar' of undefined" TypeError: Cannot read property 'avatar' of undefined 上面警告的內容

Vue使用v-for渲染資料完成後再次改變資料,頁面資料不改變

v-for不能進行雙向資料繫結,頁面渲染完成後,再次更改v-for遍歷的資料,js裡面列印的資料看到資料值已經更改,但是頁面的資料就是沒有渲染,這是為什麼呢?vue中v-for和angularjs中的ng-repeat不用 ,它對頁面只進行一次渲染。後續如果需要更改資料且顯示在頁面上就需要想想其他辦

layui 資料返回但是table表格未渲染出來的問題

最近蜂鳥速駕專案用layui框架,table進行表格渲染 控制檯打印發現有資料,但是table.render渲染不出來,後來發現是資料已經返回但是頁面元素未載入完成的緣故,用setTimeout定時器解決這個問題。程式碼如下 setTimeout(()=>{

有時候從後臺獲取的資料層次及比較多,導致修改vue資料後沒有對dom進行重新渲染

解決辦法 vm.$forceUpdate() 示例: 迫使 Vue 例項重新渲染。注意它僅僅影響例項本身和插入插槽內容的子元件,而不是所有子元件。 methods: { selectInsurance(){ //重新整理可選狀態 for(var i=0; i<this.da

vue+element 彈窗子元件的資料重新渲染

 element的彈窗是用display來控制的,dom元素只是被隱藏掉了,但是我想每次開啟彈窗,使得彈窗內顯示不同的值(彈窗資料通過HTTP請求獲得) 彈窗子元件使用 <approval-detail-dialog ref="detailDialog"

layui使用表格渲染獲取行資料

需求:使用前端框架layui生成表格,點選表格中一行資料中的按鈕,獲取到這行資料。 解決辦法: 在render中增加欄位: done: function (res, curr, count) { // $('.x-body').find('.lay

學習網站專案學習 - Django & Vue - 前端資料渲染、前端帶參轉跳

目錄 一、前端資料展示  二、前端帶參跳轉,後端獲取引數  2-1 前端程式碼 2-2 後端程式碼  2-3 前端展示 三、路由跳轉引數顯示設定   一、前端資料展示 思路總結: 前端mounte

vue中實現先請求資料渲染dom

在專案中遇到了一個問題,下面是vue    template中的程式碼:   我之前的寫法是 這樣做的結果是下面取dom的操作,取到的dom都是undefined,也就是沒有取到。 原因是並沒有按照 請求資料—>渲染dom—>獲取dom的順序執行,實際的

vue資料改變,DOM不渲染問題)

1、元件內部,屬性值地址空間內引用地址改變,DOM不能渲染。      問題舉例:this.items = [[],[],[],[]] 1、在items 中,修改任意一項陣列中的值,DOM是不會更新的, 2、解決方案: this.items = [...this

vue.js 列表資料載入更多

<template>   <div>   <!--header-->   <com-header :title="headerData.title" :toLink="headerData.toLink"></com-h

jQuery DataTables大資料非同步二次載入渲染及initComplete事件bug

我們在使用dataTables進行資料統計時,不可避免的會碰到對大資料的統計。當進行伺服器端大資料讀取時,毫無疑問的會佔用大量載入時間,拖慢頁面載入速度。為優化頁面載入速度問題,我們便要在將請求中最耗時的部分在頁面載入完成之後,進行二次載入,渲染入資料。 之前

layui問題之渲染資料表格時,僅出現10條資料

一、問題 ajax獲取服務端資料之後,要動態渲染table,但資料僅僅數顯了10條,並沒有渲染所有的資料。 二、經過 看一下表格需要的資料,0-9條的資料都自動有一個名為LAY_TABLE_INDEX的鍵值對,但10條及之後的資料都沒

layui分頁資料表格渲染

最近需要對後臺的資料進行分頁渲染並且需要進行表頭動態渲染,因此和小夥伴一起學習了layui的資料表格渲染,然後進行了改進,成功之後記錄了下來 先說前端HTML和js程式碼<script src="/layui/layui.js"></script>

淺入深出Vue資料渲染

今天來正式開始 vue的學習,首當其衝的當然是資料的渲染。畢竟資料就是拿來看的,看看如果使用 vue來展示資料。 為什麼渲染 俗話說 "人靠衣裝馬靠鞍", 那咱們的程式碼就是得靠 UI 來展現了。實現的程式碼規不規範,表不標準那是後話。但必須要好看~(開個玩笑,程式碼同樣要注意整潔與優雅噢

Layui資料表格 加入 自定義擴充套件方法(重新渲染Render當前頁資料)

具體開發中遇到的問題如下, 資料表格內的 內容 通過 table.cache["SampleList"] 修改後,重新渲染或重新載入會導致當前操作的分頁 和 配置被清空。我修改了第5頁第X行的X列值,重新渲染後就回到了最原始第1頁或重新呼叫了介面。 Layui 官方提供的文件 提供的重新整理表格方法有幾種

vue-lazy-render: 延遲渲染大組件,增強頁面切換流暢度

頁面 性能 script string boolean 設定 默認 重新 節點 最近用element來做項目,在開發的過程中,突然發現頁面的操作和切換在數據量大的時候相當卡,後來提了個issue,在furybean解答後才知道,我每個單元格都加了tooltip,會生成大量的

追求極致的用戶體驗ssr(基於vue的服務端渲染)

這樣的 console ports modules 為我 返回 意思 mage nop 首先這篇博客並不是ssr建議教程,需要ssr入門的我建議也不要搜索博客了,因為官網給出了詳細的入門步驟,只需要step by step就可以了,這篇博客的意義是如何使用ssr,可能不同的