vue2 uses element-ui, el-table and does not display, and installs with npm
Record
el-table does not display, other components are all fine
reason
Installing with cnpm may not show up. Uninstall and reinstall it.
npm uninstall element-ui npm install element-ui -S
vue element-ui deprecation el-table replace pl-table
The interface displays 5000 pieces of data, and the el-table is directly stuck. The reason is that the el-table uses too much DOM memory, causing blockage.
Solution
Lazy loading: that is, listen for scroll events or use IntersecionObserver to listen;
Rendering of visual areas: Display data only in visual areas. To ensure the integrity of the scroll bar, the non-visual areas use the displacement of the latter container to spread out using the height of the placeholder element.
Integrate pl-table
1. Install pl-tablb. It is recommended to use cnpm i
npm i pl-table cnpm i pl-table yarn - pl-table
2. Introduced, the entire framework adopts element-ui so it does not attract the second style, and uses the native element-ui style.
import plTable from 'pl-table' import 'pl-table/themes/' // Introduce styles (must be introduced), vuecli3.0 does not require configuration. Please check whether webpack has configured url-loader's reference to woff and ttf files. If you do not configure it, you will report an error.// import 'pl-table/themes/' // The default table style is ugly. It will look good if you introduce this style (if you don't like this style, don't introduce it. If you don't introduce it, it's the same as the ele table style)(plTable);
3. Use
<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="Serial Number"></el-table-column> <el-table-column prop="countyName" label="county(city、"></el-table-column> <el-table-column prop="streetName" label="Township(street"></el-table-column> <el-table-column prop="groupName" label="village(Group)"></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="Serial Number"></pl-table-column> <pl-table-column prop="countyName" label="county(city、"></pl-table-column> <pl-table-column prop="streetName" label="Township(street"></pl-table-column> <pl-table-column prop="groupName" label="village(Group)"></pl-table-column> </pl-table>
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.