<center id="qkqgy"><optgroup id="qkqgy"></optgroup></center>
  • <menu id="qkqgy"></menu>
    <nav id="qkqgy"></nav>
    <xmp id="qkqgy"><nav id="qkqgy"></nav>
  • <xmp id="qkqgy"><menu id="qkqgy"></menu>
    <menu id="qkqgy"><menu id="qkqgy"></menu></menu>
    <tt id="qkqgy"><tt id="qkqgy"></tt></tt>

  • 使用了 elementUI 中的 el-table 組件,不使用分頁,當表格數據過多時導致頁面卡頓;
    解決該問題主要是用虛擬滾動的思路。引發頁面卡頓的原因主要是由于數據量太大導致渲染的 dom 較多,然后頁面就卡頓了。
    下面使用 element 中的 el-table 實現一下虛擬滾動來解決這個問題

    1 頁面結構
    <template> <div> <div class="gl-cell-card-box"> <el-table ref="tableRef" style=
    "width:418px" border max-height="448" :data="sliceTable" :row-key="row =>
    row.id" @select="handleSelect" @select-all="handleSelectAll" > <el-table-column
    type="selection" width="40"> </el-table-column> <el-table-column prop="name"
    label="姓名" width="120"></el-table-column> <el-table-column prop="age" label="年齡"
    width="120"></el-table-column> <el-table-column prop="address" label="住址"></el-
    table-column> </el-table> </div> </div> </template>
    2 定義一些變量
    data() { return { // 表格所有數據 tableData: [], // 開始索引 startIndex: 0, // 選中的數據
    selectedRows: [], // 空元素,用于撐開table的高度 vEle: undefined, // 是否全選 isSelectedAll:
    false, }; },
    3 定義方法
    // 計算屬性 computed: { // 這個是截取表格中的部分數據,放到了 table 組件中來顯示 sliceTable() { return
    this.tableData.slice(this.startIndex, this.startIndex + 9); }, }, created() {
    // 創建一個空元素,這個空元素用來撐開 table 的高度,模擬所有數據的高度 this.vEle = document.createElement(
    "div"); this.loadData(); }, mounted() { // 綁定滾動事件 this.$refs.tableRef.$el .
    querySelector(".el-table__body-wrapper") .addEventListener("scroll", this.
    tableScroll, { passive: true }); }, methods: { // 加載數據 loadData() { let start_i
    = this.tableData.length; for (let i = start_i; i < start_i + 20; i++) { this.
    tableData.push({ id: i, name: "zhangsan" + i, age: 12, address: "china" }); }
    this.$nextTick(() => { // 設置成絕對定位,這個元素需要我們去控制滾動 this.$refs.tableRef.$el.
    querySelector(".el-table__body").style.position = "absolute"; // 計算表格所有數據所占內容的高度
    this.vEle.style.height = this.tableData.length * 48 + "px"; //
    把這個節點加到表格中去,用它來撐開表格的高度 this.$refs.tableRef.$el.querySelector(
    ".el-table__body-wrapper").appendChild(this.vEle); // 重新設置曾經被選中的數據 this.
    selectedRows.forEach(row => { this.$refs.tableRef.toggleRowSelection(row, true);
    }); }); }, /** * @description: 手動勾選時的事件 * @param {*} selection - 選中的所有數據 *
    @param {*} row - 當前選中的數據 * @return {*} */ handleSelect(selection, row) { this.
    selectedRows= selection; }, /** * @description: 全選事件 * @param {*} selection *
    @return {*} */ handleSelectAll(selection) { this.isSelectedAll = !this.
    isSelectedAll; if (this.isSelectedAll) { this.selectedRows = this.tableData; }
    else { this.selectedRows = []; this.$refs.tableRef.clearSelection(); } }, /** *
    @description: table 滾動事件 * @param {*} * @return {*} */ tableScroll() { let
    bodyWrapperEle= this.$refs.tableRef.$el.querySelector(".el-table__body-wrapper")
    ; // 滾動的高度 let scrollTop = bodyWrapperEle.scrollTop; // 下一次開始的索引 this.startIndex
    = Math.floor(scrollTop / 48); // 滾動操作 bodyWrapperEle.querySelector(
    ".el-table__body").style.transform = `translateY(${this.startIndex * 48}px)`;
    // 滾動操作后,上面的一些 tr 沒有了,所以需要重新設置曾經被選中的數據 this.selectedRows.forEach(row => { this.
    $refs.tableRef.toggleRowSelection(row, true); }); // 滾動到底,加載新數據 if (
    bodyWrapperEle.scrollHeight <= scrollTop + bodyWrapperEle.clientHeight) { if (
    this.tableData.length == 100) { this.$message.warning("沒有更多了"); return; } this.
    loadData(); } } }

    技術
    下載桌面版
    GitHub
    百度網盤(提取碼:draw)
    Gitee
    云服務器優惠
    阿里云優惠券
    騰訊云優惠券
    華為云優惠券
    站點信息
    問題反饋
    郵箱:ixiaoyang8@qq.com
    QQ群:766591547
    關注微信
    巨胸美乳无码人妻视频