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"
}
}
安装
npm install el-table-infinite-scroll@1.0.10
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')
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>