#vuejs #grid #постраничный_вывод
Есть Grid из официального примера:
Как к нему можно сделать "постраничное разделение"?
Данных всегда может быть разное количество.
Vue.component('demo-grid', {
template: '#grid-template',
props: {
data: Array,
columns: Array,
filterKey: String
},
data: function () {
var sortOrders = {}
this.columns.forEach(function (key) {
sortOrders[key] = 1
})
return {
sortKey: '',
sortOrders: sortOrders
}
},
computed: {
filteredData: function () {
var sortKey = this.sortKey
var filterKey = this.filterKey && this.filterKey.toLowerCase()
var order = this.sortOrders[sortKey] || 1
var data = this.data
if (filterKey) {
data = data.filter(function (row) {
return Object.keys(row).some(function (key) {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
})
})
}
if (sortKey) {
data = data.slice().sort(function (a, b) {
a = a[sortKey]
b = b[sortKey]
return (a === b ? 0 : a > b ? 1 : -1) * order
})
}
return data
}
},
filters: {
capitalize: function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
},
methods: {
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
}
}
})
// bootstrap the demo
var demo = new Vue({
el: '#demo',
data: {
searchQuery: '',
gridColumns: ['name', 'power'],
gridData: [
{ name: 'Chuck Norris', power: Infinity },
{ name: 'Bruce Lee', power: 9000 },
{ name: 'Jackie Chan', power: 7000 },
{ name: 'Jet Li', power: 8000 }
]
}
})
Ответы
Ответ 1
Вариант @OlegShleif адаптированный на vue2: // register the grid component Vue.component('demo-grid', { template: '#grid-template', props: { data: Array, columns: Array, filterKey: String, rowsPerPage: Number }, data: function() { var sortOrders = {} this.columns.forEach(function(key) { sortOrders[key] = 1 }) return { sortKey: '', sortOrders: sortOrders, startRow: 0 } }, computed: { filteredData: function() { var sortKey = this.sortKey var filterKey = this.filterKey && this.filterKey.toLowerCase() var order = this.sortOrders[sortKey] || 1 var data = this.data this.startRow = 0 // reset to start if (filterKey) { data = data.filter(function(row) { return Object.keys(row).some(function(key) { return String(row[key]).toLowerCase().indexOf(filterKey) > -1 }) }) } if (sortKey) { data = data.slice().sort(function(a, b) { a = a[sortKey] b = b[sortKey] return (a === b ? 0 : a > b ? 1 : -1) * order }) } return data }, dataPerPage: function() { return this.filteredData.filter((item, index) => index >= this.startRow && index < (this.startRow + this.rowsPerPage)) } }, filters: { capitalize: function(str) { return str.charAt(0).toUpperCase() + str.slice(1) } }, methods: { sortBy: function(key) { this.sortKey = key this.sortOrders[key] = this.sortOrders[key] * -1 }, movePages: function(amount) { var newStartRow = this.startRow + (amount * this.rowsPerPage); if (newStartRow >= 0 && newStartRow < this.filteredData.length) { this.startRow = newStartRow; } } } }) var baseData = [{ name: 'Chuck Norris', power: Infinity }, { name: 'Bruce Lee', power: 9000 }, { name: 'Jackie Chan', power: 7000 }, { name: 'Jet Li', power: 8000 }]; var gridData = Array(100).fill(null).map(function() { return Object.assign({}, baseData[Math.floor(Math.random() * 4)]); }); // bootstrap the demo var demo = new Vue({ el: '#demo', data: { searchQuery: '', gridColumns: ['name', 'power'], gridData: gridData } }) body { font-family: Helvetica Neue, Arial, sans-serif; font-size: 14px; color: #444; } table { border: 2px solid #42b983; border-radius: 3px; background-color: #fff; } th { background-color: #42b983; color: rgba(255, 255, 255, 0.66); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } td { background-color: #f9f9f9; } th, td { min-width: 120px; padding: 10px 20px; } th.active { color: #fff; } th.active .arrow { opacity: 1; } .arrow { display: inline-block; vertical-align: middle; width: 0; height: 0; margin-left: 5px; opacity: 0.66; } .arrow.asc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #fff; } .arrow.dsc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff; } #page-navigation { display: flex; margin-top: 5px; } #page-navigation p { margin-left: 5px; margin-right: 5px; } #page-navigation button { background-color: #42b983; border-color: #42b983; color: rgba(255, 255, 255, 0.66); }Ответ 2
Добрый день Евгений, вот вам пример с пагинацией HTML
| {{key | capitalize}} |
|---|
| {{entry[key]}} |
