Element-plus使用中遇到的問題小結
更新時間：2024年04月13日 11:59:16 作者：soxiuzi
表格數據是websocket通信獲取的數據,首次獲取20條數據,以后新增訂閱獲取一條,新增一條則向上滑動顯示最新數據,本文給大家介紹Element-plus使用中遇到的問題小結,感興趣的朋友跟隨小編一起看看吧
el-input
設置type='number'，會出現上下箭頭，在全局配置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實現滾動效果
表格數據是websocket通信獲取的數據，首次獲取20條數據，以后新增訂閱獲取一條，新增一條則向上滑動顯示最新數據。
const scroll = (tableBody: any) => {
// 先清除后設置
cancelAnimationFrame(scrollTimer.value);
let isScroll = true; //滾動
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; //設置滾動速度
if (tableDom.scrollTop <= 0) {
isScroll = false;
if (tableData.value.length > 300) {
tableData.value.pop();
}
}
}
requestAnimationFrame(fn);
})方法中的tableBody參數為table的ref，tableRef.value.$refs.bodyWrapper
到此這篇關于Element-plus使用中遇到的問題的文章就介紹到這了,更多相關Element-plus使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Element-ui?DatePicker日期選擇器基礎用法示例
這篇文章主要為大家介紹了Element-ui?DatePicker日期選擇器基礎用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Vue el-table表頭上引入組件不能實時傳參解決方法分析
這篇文章主要介紹了Vue el-table表頭上引入組件不能實時傳參解決方法，總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2022-11-11
這篇文章主要為大家詳細介紹了vue組件學習教程，根據Vue官方文檔學習的筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
眾所周知Element是一套Vue.js后臺組件庫,它能夠幫助你更輕松更快速地開發(fā)后臺項目,下面這篇文章主要給大家介紹了關于使用Element進行前端開發(fā)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
vue無法加載文件C:\xx\AppData\Roaming\npm\vue.ps1系統禁止運行腳本
這篇文章主要介紹了vue?:?無法加載文件?C:\xx\AppData\Roaming\npm\vue.ps1...系統上禁止運行腳本問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
Vue?Store是的狀態(tài)管理模式和庫,它提供了一種集中存儲管理應用的所有組件的狀態(tài),并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化,這篇文章主要介紹了Vue?關于Store的用法,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了結合Vue控制字符和字節(jié)的顯示個數的示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Vue3中Watch、Watcheffect、Computed的使用和區(qū)別解析
Watch、Watcheffect、Computed各有優(yōu)劣,選擇使用哪種方法取決于應用場景和需求,watch?適合副作用操作,watchEffect適合簡單的自動副作用管理,computed?適合聲明式的派生狀態(tài)計算,本文通過場景分析Vue3中Watch、Watcheffect、Computed的使用和區(qū)別,感興趣的朋友一起看看吧2024-07-07
本篇文章主要介紹了vue-resouce設置請求頭的三種方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue3?使用v-md-editor如何動態(tài)上傳圖片的方法實現
本文主要介紹了Vue3?使用v-md-editor如何動態(tài)上傳圖片，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08