需求：

公司最近開了個(gè)需求會(huì)，要求做一個(gè)可編輯的table的表格，并且要求該表格添加權(quán)限，點(diǎn)擊可編輯，時(shí)間段跳轉(zhuǎn)（選擇時(shí)間，跳轉(zhuǎn)到時(shí)間當(dāng)前位置），無分頁（要求一頁解決），有選中框，有批量處理的功能，input添加校驗(yàn)功能，小圖標(biāo)展示，編輯后局部刷新頁面：
1.管理員（可編輯，可查看，可以操控所有權(quán)限（內(nèi)置保存，導(dǎo)出等））；
2.員工（可編輯，可查看，導(dǎo)出，保存）；
3.觀察人員（可查看）；

做法：

前后端聯(lián)調(diào)，權(quán)限控制。接口在修改完成后，接口獲取修改數(shù)據(jù)，頁面部分刷新。使用element table @cell-click="cellClick"方法，獲取table下表標(biāo)實(shí)現(xiàn)權(quán)限控制，使用input（防止頁面卡頓），使用（οnkeyup=“this.value=this.value.replace(/[, ]/g,‘’)”）禁止傳空。采用滾動(dòng)監(jiān)聽，實(shí)現(xiàn)頭部，底部跳轉(zhuǎn)，標(biāo)識(shí)轉(zhuǎn)變。一個(gè)頁面展示所有信息，對(duì)數(shù)據(jù)進(jìn)行優(yōu)化，減少不必要的信息導(dǎo)致頁面卡頓。編輯一個(gè)信息，在下面添加一行數(shù)據(jù)，展示依舊是不可編輯的裝態(tài)。有權(quán)限則可以編輯table頁面，否則只能觀察，或者顯示無權(quán)限。

<el-table
      ref="multipleTable"
      :data="supplyEnterTable"
      border
      :height="tableHeight"
      @sort-change="changeSort"
      v-adaptive="{ bottomOffset: 65 }"
      class="tableBig tablemin-height"
      @selection-change="handleRowChange"
      :cell-class-name="tableCellClassName"
      @cell-click="cellClick"
    >
    <el-table-column type="selection" fixed width="55" align="center"> </el-table-column>
	<el-table-column label="姓名" prop="applyName" min-width="130" align="center">
        <template slot-scope="scope">
          <input
            v-if="scope.row.index === rowSwitch && scope.column.index === colSwitch"
            placeholder="請(qǐng)輸入姓名"
            v-model.lazy="scope.row.applyName"
            
            class="inputTrim"
          />
           <p v-else>{{ scope.row.applyName }}</p>
        </template>
      </el-table-column>
</el-table>


//單元格點(diǎn)擊
    cellClick(row, column) {
      let refsElTable = this.$refs.multipleTable; // 獲取表格對(duì)象
      if (!this.multipleSelection.includes(row) && this.forHaveShow(row)) {
        refsElTable.toggleRowSelection(row); // 調(diào)用選中行方法
      }
      this.rowSwitch = row.index;
      this.colSwitch = column.index;
    },

問題：

數(shù)據(jù)較大時(shí)，頁面卡頓，編輯點(diǎn)擊緩慢，切換狀態(tài)緩慢，切換渲染頁，無法渲染，頁面推進(jìn)滿，會(huì)導(dǎo)致頁面卡死。
在網(wǎng)上看到問題治標(biāo)不治本，頁面交互太多，大概15個(gè)操作，渲染處理頁面各類數(shù)據(jù)，為0不展示等等，導(dǎo)致dom渲染緩慢，速度很慢

解決方案：

最后減少頁面dom渲染，減少循環(huán)嵌套，使用this.$set局部刷新數(shù)據(jù)，提取公共方法，將方法大致規(guī)整。
修改了element table為umy table來解決卡頓問題，確實(shí)改善了這種情況文章來源地址http://www.zghlxwxcb.cn/news/detail-556855.html

<ux-grid border
      show-overflow
      keep-source
      use-virtual
      ref="multipleTable"      
      :height="tableHeight"
      :highlightCurrentRow="false"
      @sort-change="changeSort"
      v-adaptive="{ bottomOffset: 65 }"
      class="externalTable tableBig tablemin-height"
      :cell-class-name="tableCellClassName"
      @cell-click="cellClick"
      @selection-change="handleRowChange"
      @table-body-scroll="tableScroll"
      :edit-config="{trigger: 'click', mode: 'cell'}">
  <ux-table-column title="信息" field="verifyCommission" min-width="130" align="left" edit-render>
        <template v-slot="scope">
        </template>
        <template v-slot:edit="scope">
        </template>
    </ux-table-column>

到了這里，關(guān)于vue element-ui (可編輯)table加載緩慢問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！