vue2.0解决el-table无限滚动解决数据量大前端界面渲染耗时或卡顿问题_el-table-infinite-scroll

vue相关依赖版本

{
  "name": "vue-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "el-table-infinite-scroll": "^1.0.10",
    "element-ui": "^2.15.10",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

安装

npm install el-table-infinite-scroll@1.0.10
1

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import elTableInfiniteScroll from 'el-table-infinite-scroll'

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(elTableInfiniteScroll)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

app.vue

<template>
  <div id="app">
    <el-table
      :data="tableData"
      v-loading="loading"
      v-el-table-infinite-scroll="loadTable"
    >
      <el-table-column
        label="id"
        prop="date"
      ></el-table-column>
      <el-table-column
        label="名称"
        prop="name"
      ></el-table-column>
      <el-table-column
        label="地址"
        prop="address"
      ></el-table-column>
      <el-table-column
        label="省份"
        prop="province"
      ></el-table-column>
      <el-table-column
        label="城市"
        prop="city"
      ></el-table-column>
      <el-table-column
        label="压缩包"
        prop="zip"
      ></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      title: 'vue',
      mytodo: '',
      todos: [
        { text: '吃饭', done: false },
        { text: '睡觉', done: false },
        { text: '写代码', done: false }
      ],
      saveDATA: [],
      tableData: [],
      count: 5,
      loading: false
    }
  },
  computed: {
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.saveDATA = []
      for (let i = 0; i < 1000; i++) {
        this.saveDATA.push({
          date: i,
          name: '王小虎' + i,
          address: '1518',
          province: 'github:',
          city: 'divcssjs',
          zip: 'divcssjs' + i
        })
      }
    },
    loadTable () {
      this.loading = true
      if (this.tableData.length < this.saveDATA.length) {
        const data = this.tableData.concat(
          this.saveDATA.slice(this.tableData.length, this.tableData.length + this.count)
        )
        this.$set(this, 'tableData', data)
      }
      this.loading = false
    }
  }
}
</script>
<style lang="scss">
li.done {
  text-decoration: line-through;
  color: red;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90