element 表格导入500条内容就很卡

新手上路,请多包涵

有什么解决的方案吗

<template>
  <!--定义大小框架-->
  <div class="Account">
    
    <div class="AccountList">

      <el-table :data="tableData" border  height="660" style="width: 100%">
        <el-table-column type="selection" width="30"></el-table-column>
        <el-table-column label="序号" width="48">
          <template slot-scope="scope">
            <span style="margin-left: 5px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="账号" width="200">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
    };
    
  },
  methods: {
    handleEdit(index, row) {
      var data = {
        User: row.name,
        pwd: row.token
      };
    
      setToken(data, this);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    getAccount(){
      var fs=require('fs');
      var data=fs.readFileSync('user.json').toString();

      let resdata = data.split("\r");
      var results=[];
      for (let index = 0; index < resdata.length; index++) {
        if (resdata[index]!='') {

          results.push(
            {
              date:index,
              name:resdata[index],
            }
          )
          
        }
        
      }
      this.tableData = results;
      
    },

  },
  mounted(){
    this.getAccount()
  }
};
阅读 2.9k
3 个回答

DOM节点太多了吧
执行一下document.all 查看一共有多少个节点 几千个都话就会有卡顿的感觉了

建议数据多的话 还是以 分页 形式来渲染

搭配一下<el-pagination>分页展示

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏