Element-plus使用中遇到的問(wèn)題小結(jié)
更新時(shí)間：2024年04月13日 11:59:16 作者：soxiuzi
表格數(shù)據(jù)是websocket通信獲取的數(shù)據(jù),首次獲取20條數(shù)據(jù),以后新增訂閱獲取一條,新增一條則向上滑動(dòng)顯示最新數(shù)據(jù),本文給大家介紹Element-plus使用中遇到的問(wèn)題小結(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類(lèi)名
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使用中遇到的問(wèn)題的文章就介紹到這了,更多相關(guān)Element-plus使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了vue和react項(xiàng)目中key的作用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
在本篇文章里小編給大家整理了關(guān)于vue的for循環(huán)使用方法和步驟，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02
Vue如何實(shí)現(xiàn)自動(dòng)觸發(fā)功能
這篇文章主要介紹了Vue如何實(shí)現(xiàn)自動(dòng)觸發(fā)功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
使用Vue+MySQL實(shí)現(xiàn)登錄注冊(cè)的實(shí)戰(zhàn)案例
第一次用Vue+MySQL實(shí)現(xiàn)注冊(cè)登錄功能,就已經(jīng)踩了很多坑,下面這篇文章主要給大家介紹了關(guān)于使用Vue+MySQL實(shí)現(xiàn)登錄注冊(cè)案例的相關(guān)資料,需要的朋友可以參考下2022-05-05
VUE指令是什么,VUE自定義指令又是什么,下面就和大家分享一下個(gè)人對(duì)它們的理解2019-02-02
在vue中使用screenfull?依賴(lài),實(shí)現(xiàn)全屏組件方式
這篇文章主要介紹了在vue中使用screenfull?依賴(lài)，實(shí)現(xiàn)全屏組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
文章解釋了Vue項(xiàng)目打包后dist目錄下各文件夾及其文件的功能和作用,主要包括CSS文件、字體文件、圖片文件、JS文件等,還說(shuō)明了Sourcemap的作用及externals配置的使用方法2026-04-04
Vue中進(jìn)行分布式鑒權(quán)與認(rèn)證的過(guò)程
在Vue應(yīng)用中，我們通常需要實(shí)現(xiàn)分布式鑒權(quán)和認(rèn)證，以確保用戶(hù)的安全性和數(shù)據(jù)的保密性，本文將介紹在Vue中如何進(jìn)行分布式鑒權(quán)與認(rèn)證,需要的朋友可以參考下2023-06-06
詳解vue-cli本地環(huán)境API代理設(shè)置和解決跨域
這篇文章主要介紹了詳解vue-cli本地環(huán)境API代理設(shè)置和解決跨域，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
凡是做SPA的項(xiàng)目,特別是移動(dòng)端的SAP項(xiàng)目,首屏加載速度必定是一個(gè)繞不過(guò)去的話(huà)題,下面這篇文章主要給大家介紹了關(guān)于Vue頁(yè)面首次載入優(yōu)化的相關(guān)資料,需要的朋友可以參考下2021-12-12