大数据表格渲染
假如后端一次性给你10000条数据,你渲染数据时,很有可能直接造成页面卡死
网上有一个很好用的包(vxe-table),专门来解决这个问题 https://xuliangzhan_admin.gitee.io/vxe-table/#/table/scroll/scroll
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" style="width: 100%"> <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="editPointData(scope.row)">编 辑</span> </template> </vxe-table-column> </vxe-table> </div> </template> <script> export default { data() { return { tableData: [] }; }, created() { this.getData(); }, 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以上