vue scroll table
This commit is contained in:
Sebastian Frank
parent
06db9fa762
commit
fb7a1f5660
34
package-lock.json
generated
34
package-lock.json
generated
@ -741,6 +741,23 @@
|
||||
"babel-types": "6.26.0"
|
||||
}
|
||||
},
|
||||
"babel-polyfill": {
|
||||
"version": "6.26.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
|
||||
"integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
|
||||
"requires": {
|
||||
"babel-runtime": "6.26.0",
|
||||
"core-js": "2.5.0",
|
||||
"regenerator-runtime": "0.10.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"regenerator-runtime": {
|
||||
"version": "0.10.5",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
|
||||
"integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
|
||||
}
|
||||
}
|
||||
},
|
||||
"babel-preset-es2015": {
|
||||
"version": "6.24.1",
|
||||
"resolved": "https://registry.npmjs.org/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz",
|
||||
@ -792,7 +809,6 @@
|
||||
"version": "6.26.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
|
||||
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"core-js": "2.5.0",
|
||||
"regenerator-runtime": "0.11.0"
|
||||
@ -1480,8 +1496,7 @@
|
||||
"core-js": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.0.tgz",
|
||||
"integrity": "sha1-VpwFCRi+ZIazg3VSAorgRmtxcIY=",
|
||||
"dev": true
|
||||
"integrity": "sha1-VpwFCRi+ZIazg3VSAorgRmtxcIY="
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@ -3168,6 +3183,11 @@
|
||||
"integrity": "sha1-y8NcYu7uc/Gat7EKgBURQBr8D5A=",
|
||||
"dev": true
|
||||
},
|
||||
"intersection-observer": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.4.0.tgz",
|
||||
"integrity": "sha512-hBECeRcNPMrQP02IlicMCDiL19KQweoWukv35juIVehB2lE+spel5UyfTux/YCkXaR8Zz0jq3xMZeWYZBAU2SA=="
|
||||
},
|
||||
"invariant": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
|
||||
@ -5948,8 +5968,7 @@
|
||||
"regenerator-runtime": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz",
|
||||
"integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A=="
|
||||
},
|
||||
"regenerator-transform": {
|
||||
"version": "0.10.1",
|
||||
@ -6973,6 +6992,11 @@
|
||||
"vue-template-es2015-compiler": "1.5.3"
|
||||
}
|
||||
},
|
||||
"vue-observe-visibility": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.1.3.tgz",
|
||||
"integrity": "sha1-wvD8tchtWuJE9Tx+KPpjWg24ujY="
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-2.7.0.tgz",
|
||||
|
||||
@ -30,7 +30,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.16.2",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"intersection-observer": "^0.4.0",
|
||||
"vue": "^2.4.2",
|
||||
"vue-observe-visibility": "^0.1.3",
|
||||
"vue-router": "^2.7.0",
|
||||
"vuex": "^2.3.1"
|
||||
},
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
<tr v-for="(r, ri) in rows" :key="ri">
|
||||
<td v-for="(c, ci) in columns" :key="ci">
|
||||
<span v-if="c.prop">{{ r[c.prop] }}</span>
|
||||
<span v-else-if="c.render">{{ c.render(r) }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
80
src/components/scroll-table.vue
Normal file
80
src/components/scroll-table.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="Scroll-Table">
|
||||
<my-table :columns="columns" :rows="rows"></my-table>
|
||||
<div v-show="hasMore" v-if="!loading" v-observe-visibility="visibilityChanged">...</div>
|
||||
<div v-if="loading">loading...</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyTable from './my-table.vue';
|
||||
|
||||
import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility';
|
||||
|
||||
export default {
|
||||
name: "ScrollTable",
|
||||
directives: {
|
||||
ObserveVisibility
|
||||
},
|
||||
components: {
|
||||
MyTable
|
||||
},
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
},
|
||||
newRows: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hasMore: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
handler: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
newRows(rows) {
|
||||
rows.forEach(row => {
|
||||
this.rows.push(row)
|
||||
});
|
||||
this.currentOffset += rows.length;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rows: [ ],
|
||||
currentOffset: this.offset
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
visibilityChanged(isVisible, entry) {
|
||||
if (isVisible) {
|
||||
// infinite scrolling
|
||||
this.handler(this.currentOffset, this.limit);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<div class="Userlist">
|
||||
<h1>Userlist</h1>
|
||||
<my-table :columns="columns" :rows="rows"></my-table>
|
||||
<button @click="add()">add</button>
|
||||
<scroll-table :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more"></scroll-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyTable from './my-table.vue';
|
||||
import ScrollTable from './scroll-table.vue';
|
||||
|
||||
export default {
|
||||
name: "Userlist",
|
||||
components: {
|
||||
MyTable
|
||||
ScrollTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -24,20 +23,44 @@ export default {
|
||||
{
|
||||
heading: 'Benutzername',
|
||||
prop: 'Username'
|
||||
},
|
||||
{
|
||||
heading: 'Render',
|
||||
render(row) {
|
||||
return row.ID;
|
||||
}
|
||||
}
|
||||
],
|
||||
rows: [
|
||||
]
|
||||
newRows: [ ],
|
||||
hasMore: true,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('apiRequest', {
|
||||
endpoint: 'users'
|
||||
})
|
||||
.then(rows => this.rows = rows)
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
methods: {
|
||||
more(offset, limit) {
|
||||
this.loading = true;
|
||||
this.$store.dispatch('apiRequest', {
|
||||
endpoint: 'users',
|
||||
params: {
|
||||
start: offset,
|
||||
length: limit
|
||||
}
|
||||
})
|
||||
.then(rows => {
|
||||
this.hasMore = (rows.length >= limit);
|
||||
this.newRows = rows;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 200); // for oberserver
|
||||
})
|
||||
.catch(error => {
|
||||
this.loading = false;
|
||||
this.hasMore = false;
|
||||
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -42,11 +42,12 @@ const store = new Vuex.Store({
|
||||
actions: {
|
||||
apiRequest(context, payload) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let endpoint = context.state.api.baseURL + payload.endpoint;
|
||||
|
||||
Axios({
|
||||
method: payload.method ? payload.method : 'get',
|
||||
url: endpoint,
|
||||
baseURL: context.state.api.baseURL,
|
||||
url: payload.endpoint,
|
||||
params: payload.params,
|
||||
data: payload.data,
|
||||
headers: {
|
||||
'X-Auth-Token': context.state.authToken
|
||||
|
||||
@ -34,7 +34,11 @@ if (env === 'production') {
|
||||
|
||||
// Main Settings config
|
||||
module.exports = {
|
||||
entry: entryPoint,
|
||||
entry: [
|
||||
'intersection-observer',
|
||||
'babel-polyfill',
|
||||
entryPoint
|
||||
],
|
||||
devtool: 'source-map',
|
||||
output: {
|
||||
path: exportPath,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user