大數據表格渲染

假如后端一次性給你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以上