⼤数据表格渲染
假如后端⼀次性给你10000条数据，你渲染数据时，很有可能直接造成页⾯卡死
1.安装
npm install xe-utils vxe-table vxe-table-plugin-element element-ui  //适配element-ui  如果不需要，可以不⽤下载element-ui
2.main.js引⼊
import 'xe-utils'
import VXETable from 'vxe-table'
import VXETablePluginElement from 'vxe-table-plugin-element'
import 'vxe-table/lib/index.css'
import 'vxe-table-plugin-element/dist/style.css'
Vue.use(VXETable)
VXETable.use(VXETablePluginElement)
Vue.use(ElTableFooter)
3.页⾯中使⽤
<template>
<div>
<!-- <el-table :data="tableData" :height="300" >
<el-table-column label="name" prop="name" sortable></el-table-column>
<el-table-column label="sex" prop="sex"></el-table-column>
<el-table-column label="age" prop="age"></el-table-column>
<el-table-column label="address" prop="address" show-overflow></el-table-column>
</el-table> -->
<vxe-table border show-overflow highlight-hover-row height="300" :sort-config="{trigger: 'cell'}" :data="tableData" @selection-change="selectChangePoints">      <vxe-table-column type="selection" width="100"></vxe-table-column>
<vxe-table-column field="name" title="name"></vxe-table-column>
<vxe-table-column field="sex" title="sex"></vxe-table-column>
<vxe-table-column field="age" title="age"></vxe-table-column>
<vxe-table-column field="address" title="address" show-overflow>
<template slot-scope="scope">
<span @click="w)">编辑</span>
</template>
</vxe-table-column>
</vxe-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: []
};
},tabletable
created() {
},
methods: {
getData() {
for (let i = 0; i < 10000; i++) {
let obj = {
name: "wang" + i,
sex: "男",
age: 13,
address: "sadasdsad" + i
};
this.tableData.push(obj);
}
},
editPointData(row) {
console.log(row, "asdasdsad");
},
selectChangePoints(point){
console.log(point)
}
}
};
</script>
<style  scoped>
</style>
　注意：vue版本需要再2.6以上

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。