国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

監(jiān)聽element-ui table滾動(dòng)事件

Carbs / 2405人閱讀

摘要：背景做管理平臺(tái)的項(xiàng)目用到了，需要通過監(jiān)聽滾動(dòng)的位置來(lái)獲取最新的數(shù)據(jù)，那么怎么樣監(jiān)聽的滾動(dòng)呢準(zhǔn)備我們默認(rèn)的技術(shù)棧是代碼信息綁定監(jiān)聽事件獲取需要綁定的滾動(dòng)距離變量是可視區(qū)的高度變量是滾動(dòng)條的總高度獲取到的不是

背景 
做管理平臺(tái)的項(xiàng)目,用到了element-ui，需要通過監(jiān)聽el-table滾動(dòng)的位置來(lái)獲取最新的數(shù)據(jù)，那么怎么樣監(jiān)聽el-table的滾動(dòng)呢？
準(zhǔn)備 
我們默認(rèn)的技術(shù)棧是 vue+element-ui

template代碼：

綁定監(jiān)聽事件

    mounted() {
        // 獲取需要綁定的table
        this.dom = this.$refs.table.bodyWrapper
        this.dom.addEventListener("scroll", () => {
            // 滾動(dòng)距離
            let scrollTop = this.dom.scrollTop
            // 變量windowHeight是可視區(qū)的高度
            let windowHeight = this.dom.clientHeight || this.dom.clientHeight
            // 變量scrollHeight是滾動(dòng)條的總高度
            let scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight
            if (scrollTop + windowHeight === scrollHeight) {
                // 獲取到的不是全部數(shù)據(jù) 當(dāng)滾動(dòng)到底部 繼續(xù)獲取新的數(shù)據(jù)
                if (!this.allData) this.getMoreLog()
                console.log("scrollTop", scrollTop + "windowHeight", windowHeight + "scrollHeight", scrollHeight)
            }
        })
    }

獲取到新的數(shù)據(jù)后，調(diào)整滾動(dòng)條的位置

    getMoreLog() {
        ...
        this.dom.scrollTop = this.dom.scrollTop - 100
        ...
    }
結(jié)語(yǔ)

至此我們已經(jīng)完成了對(duì)table的綁定！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/102944.html

相關(guān)文章

  • vueTable大數(shù)據(jù)展示優(yōu)化

    摘要：懶加載方式常見的有淘寶一屏用元素占據(jù)一定的高度，然后再去拉圖片數(shù)據(jù)。但這種方式還是需要元素占位，淘寶一頁(yè)的數(shù)據(jù)量其實(shí)不算大，因?yàn)樗Y(jié)合了分頁(yè)。 背景 showImg(https://segmentfault.com/img/bVbhSVh?w=1606&h=440);大數(shù)據(jù)項(xiàng)目根據(jù)用戶輸入代碼查詢數(shù)據(jù)，用戶的代碼不可控（比如select from db limit 5000），有可能...

    JasinYip 評(píng)論0 收藏0

  • 步步向前之Element-UI

    摘要：無(wú)效方案根據(jù)交易所小時(shí)成交量占比和實(shí)時(shí)價(jià)格加權(quán)計(jì)算得到渲染結(jié)果是一個(gè)包含了文字，同時(shí)有名為的，并無(wú)小圖標(biāo)，后邊中括號(hào)結(jié)構(gòu)里只能有一個(gè)有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動(dòng)固定表頭的...

    Imfan 評(píng)論0 收藏0

  • 步步向前之Element-UI

    摘要：無(wú)效方案根據(jù)交易所小時(shí)成交量占比和實(shí)時(shí)價(jià)格加權(quán)計(jì)算得到渲染結(jié)果是一個(gè)包含了文字，同時(shí)有名為的，并無(wú)小圖標(biāo)，后邊中括號(hào)結(jié)構(gòu)里只能有一個(gè)有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動(dòng)固定表頭的...

    ZoomQuiet 評(píng)論0 收藏0

  • 開發(fā)中遇到的問題總結(jié)

    摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

    wenshi11019 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<