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)存占用過多，引起阻塞

解決方案

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

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

整合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>