vue2使用element-ui,el-table不顯示,用npm安裝方式

更新時(shí)間：2023年07月18日 09:48:57 作者：xtcyolo

這篇文章主要介紹了vue2使用element-ui,el-table不顯示,用npm安裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue2使用element-ui,el-table不顯示,用npm安裝

記錄

el-table不顯示，其他組件一切正常

原因

用cnpm安裝可能會(huì)不顯示，直接卸載然后重新安裝，用npm

npm uninstall element-ui
npm install element-ui -S

vue element-ui棄用el-table 改換pl-table

界面顯示5000條數(shù)據(jù)，el-table 直接卡死，原因就是因?yàn)閑l-table 采用的是DOM 內(nèi)存占用過(guò)多，引起阻塞

解決方案

懶加載：即監(jiān)聽(tīng)scroll事件或使用IntersecionObserver監(jiān)聽(tīng)；

可視區(qū)域的渲染：僅在可視區(qū)域展示數(shù)據(jù)，為保證滾動(dòng)條的完整性，非可視區(qū)域使用占位元素的高度后者容器的位移來(lái)?yè)伍_(kāi)。

整合pl-table

1、安裝pl-tablb 建議采用cnpm i

npm i pl-table
cnpm i pl-table
yarn - pl-table? ? ? ??

2、main.js 引入，整個(gè)框架采用的是element-ui 所以不引人第二個(gè)樣式，使用原生的element-ui樣式

import plTable from 'pl-table'
import 'pl-table/themes/index.css' // 引入樣式（必須引入)，vuecli3.0不需要配置，cli2.0請(qǐng)查看webpack是否配置了url-loader對(duì)woff，ttf文件的引用,不配置會(huì)報(bào)錯(cuò)哦
// import 'pl-table/themes/plTableStyle.css' // 默認(rèn)表格樣式很丑 引入這個(gè)樣式就可以好看啦（如果你不喜歡這個(gè)樣式，就不要引入，不引入就跟ele表格樣式一樣）
Vue.use(plTable);?

3、使用

<el-table border size="mini" class="table-ui" max-height="700" :stripe="true" :data="tableData" @row-dblclick="rowDblclick" @selection-change="changeFun" ? @sort-change="sortChange" >
? ? <el-table-column prop="sequenceNum" label="序號(hào)"></el-table-column>
? ? <el-table-column prop="countyName" label="縣(市、"></el-table-column>
? ? <el-table-column prop="streetName" label="鄉(xiāng)鎮(zhèn)(街"></el-table-column>
? ? <el-table-column prop="groupName" label="村(組)"></el-table-column>
</el-table>

<pl-table border size="mini" class="table-ui" max-height="700" :stripe="true" :data="tableData" @row-dblclick="rowDblclick" @selection-change="changeFun" ? @sort-change="sortChange" big-data-checkbox ?fixedColumnsRoll use-virtual>
? ? <pl-table-column prop="sequenceNum" label="序號(hào)"></pl-table-column>
? ? <pl-table-column prop="countyName" label="縣(市、"></pl-table-column>
? ? <pl-table-column prop="streetName" label="鄉(xiāng)鎮(zhèn)(街"></pl-table-column>
? ? <pl-table-column prop="groupName" label="村(組)"></pl-table-column>
</pl-table>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue從TodoList中學(xué)父子組件通信
這篇文章主要介紹了Vue從TodoList中學(xué)父子組件通信，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
vue-resource攔截器設(shè)置頭信息的實(shí)例
下面小編就為大家?guī)?lái)一篇vue-resource攔截器設(shè)置頭信息的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
淺析vue中常見(jiàn)循環(huán)遍歷指令的使用 v-for
這篇文章主要介紹了vue中常見(jiàn)循環(huán)遍歷指令的使用 v-for，包括v-for遍歷數(shù)組，v-for遍歷json對(duì)象,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2018-04-04
Vue報(bào)錯(cuò)"Failed?to?resolve?loader:less-loader"的解決方
這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)"Failed?to?resolve?loader:less-loader"的解決方法,文中通過(guò)圖文介紹的非常詳細(xì),對(duì)同樣遇到這樣問(wèn)題的朋友具有一定的需要的朋友可以參考下
2023-02-02
vue router 路由跳轉(zhuǎn)方法講解
這篇文章主要介紹了vue router 路由跳轉(zhuǎn)方法概述,使用到Vue的項(xiàng)目，我們最常見(jiàn)使用的就是Vue配套的Vue Router庫(kù)，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下
2022-12-12
淺談Vue數(shù)據(jù)響應(yīng)
這篇文章主要介紹了淺談Vue數(shù)據(jù)響應(yīng)，Vue的數(shù)據(jù)響應(yīng)主要是依賴(lài)了Object.defineProperty()，下面就具體來(lái)介紹一下如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)
2018-11-11
Vue3使用defineAsyncComponent實(shí)現(xiàn)異步組件加載的代碼示例
在 Vue 3 中,異步組件加載是一種優(yōu)化應(yīng)用性能的重要手段,通過(guò)異步加載組件,可以減少初始加載時(shí)的資源體積,從而提升應(yīng)用的加載速度和用戶(hù)體驗(yàn),本文將詳細(xì)介紹如何使用 defineAsyncComponent 實(shí)現(xiàn)異步組件加載,并提供相關(guān)的代碼示例,需要的朋友可以參考下
2025-03-03
Vue filter格式化時(shí)間戳?xí)r間成標(biāo)準(zhǔn)日期格式的方法
今天小編就為大家分享一篇Vue filter格式化時(shí)間戳?xí)r間成標(biāo)準(zhǔn)日期格式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
詳解vue數(shù)據(jù)響應(yīng)式原理之?dāng)?shù)組
這篇文章主要為大家詳細(xì)介紹了vue數(shù)據(jù)響應(yīng)式原理之?dāng)?shù)組，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
父子組件生命周期及子組件獲取數(shù)據(jù)傳值問(wèn)題剖析
這篇文章主要介紹了父子組件生命周期及子組件獲取數(shù)據(jù)問(wèn)題剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-10-10