有什么解决的方案吗
<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()
}
};
DOM节点太多了吧
执行一下document.all 查看一共有多少个节点 几千个都话就会有卡顿的感觉了
建议数据多的话 还是以 分页 形式来渲染