快捷導(dǎo)航

Element-plus使用中遇到的問題小結(jié)

更新時(shí)間：2024年04月13日 11:59:16 作者：soxiuzi

表格數(shù)據(jù)是websocket通信獲取的數(shù)據(jù),首次獲取20條數(shù)據(jù),以后新增訂閱獲取一條,新增一條則向上滑動(dòng)顯示最新數(shù)據(jù),本文給大家介紹Element-plus使用中遇到的問題小結(jié),感興趣的朋友跟隨小編一起看看吧

el-input

設(shè)置type='number'，會(huì)出現(xiàn)上下箭頭，在全局配置css樣式即可解決，在app.vue中的css中加入：

.table-clear-row {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
  inpit {
    border: none;
  }
}

.table-clear-row為el-input所在的div類名

el-table實(shí)現(xiàn)滾動(dòng)效果

表格數(shù)據(jù)是websocket通信獲取的數(shù)據(jù)，首次獲取20條數(shù)據(jù)，以后新增訂閱獲取一條，新增一條則向上滑動(dòng)顯示最新數(shù)據(jù)。

const scroll = (tableBody: any) => {
  // 先清除后設(shè)置
  cancelAnimationFrame(scrollTimer.value);
  let isScroll = true; //滾動(dòng)
  const tableDom = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];
  tableDom.scrollTop = tableDom.scrollHeight - curScrollHeight.value - tableDom.clientHeight;
  tableData.value.length <= 300 && (curScrollHeight.value += tableDom.scrollTop);
  scrollTimer.value = requestAnimationFrame(function fn() {
    if (isScroll) {
      tableDom.scrollTop -= 2; //設(shè)置滾動(dòng)速度
      if (tableDom.scrollTop <= 0) {
        isScroll = false;
        if (tableData.value.length > 300) {
          tableData.value.pop();
        }
      }
    }
    requestAnimationFrame(fn);
  })

方法中的tableBody參數(shù)為table的ref，tableRef.value.$refs.bodyWrapper

到此這篇關(guān)于Element-plus使用中遇到的問題的文章就介紹到這了,更多相關(guān)Element-plus使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Element-ui?DatePicker日期選擇器基礎(chǔ)用法示例
這篇文章主要為大家介紹了Element-ui?DatePicker日期選擇器基礎(chǔ)用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法分析
這篇文章主要介紹了Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法，總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路
2022-11-11
vue組件學(xué)習(xí)教程
這篇文章主要為大家詳細(xì)介紹了vue組件學(xué)習(xí)教程，根據(jù)Vue官方文檔學(xué)習(xí)的筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
使用Element進(jìn)行前端開發(fā)的詳細(xì)圖文教程
眾所周知Element是一套Vue.js后臺(tái)組件庫,它能夠幫助你更輕松更快速地開發(fā)后臺(tái)項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于使用Element進(jìn)行前端開發(fā)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
$vue無法加載文件C:\xx\AppData\Roaming\npm\vue.ps1系統(tǒng)禁止運(yùn)行腳本$
vue無法加載文件C:\xx\AppData\Roaming\npm\vue.ps1系統(tǒng)禁止運(yùn)行腳本
這篇文章主要介紹了vue?:?無法加載文件?C:\xx\AppData\Roaming\npm\vue.ps1...系統(tǒng)上禁止運(yùn)行腳本問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
Vue?關(guān)于Store的用法小結(jié)
Vue?Store是的狀態(tài)管理模式和庫,它提供了一種集中存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,這篇文章主要介紹了Vue?關(guān)于Store的用法,需要的朋友可以參考下
2024-08-08
結(jié)合Vue控制字符和字節(jié)的顯示個(gè)數(shù)的示例
這篇文章主要介紹了結(jié)合Vue控制字符和字節(jié)的顯示個(gè)數(shù)的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
Vue3中Watch、Watcheffect、Computed的使用和區(qū)別解析
Watch、Watcheffect、Computed各有優(yōu)劣,選擇使用哪種方法取決于應(yīng)用場景和需求,watch?適合副作用操作,watchEffect適合簡單的自動(dòng)副作用管理,computed?適合聲明式的派生狀態(tài)計(jì)算,本文通過場景分析Vue3中Watch、Watcheffect、Computed的使用和區(qū)別,感興趣的朋友一起看看吧
2024-07-07
vue-resouce設(shè)置請求頭的三種方法
本篇文章主要介紹了vue-resouce設(shè)置請求頭的三種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
Vue3?使用v-md-editor如何動(dòng)態(tài)上傳圖片的方法實(shí)現(xiàn)
本文主要介紹了Vue3?使用v-md-editor如何動(dòng)態(tài)上傳圖片，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08