1010000005357374
{{ column.text }} 0 ? 'asc' : 'dsc'"> {{entry[column.key]}} Total {{source.length}} Records, Now {{ length }} Records, {{pages}} Pages {{ n }} 'use strict'; Vue.component('app', { props: { source: { type: Array }, columns: { type: Array }, // count per page size: { type: Number }, paginatorSize: { type: Number, default: 10 } }, data () { var sortOrders = {} this.columns.forEach(function (column) { if (column.key) sortOrders[column.key] = 1 }) return { left: 0, // header row offset position. edge: 0, // offset of scrollbar width. sortKey: '', // column name of sort sortOrders: sortOrders, currentPage: 1, searchQuery: null, } }, template: '# app', ready () { var clientWidth = document.querySelector('.u-body').clientWidth var offsetWidth = document.querySelector('.u-body').offsetWidth this.edge = offsetWidth - clientWidth; }, methods: { onHorizontalScroll (e) { this.left = document.querySelector('.u-body').scrollLeft }, sortBy (e, key) { this.sortKey = key this.sortOrders[key] = this.sortOrders[key] * -1 }, paginate (page) { if (page this.pages) page = this.pages this.currentPage = page }, / * jump to first page of N scope * @param {String} dir [value is 'next' or 'prev', next or prev scope] */ jump (dir) { dir = dir || 'next'; var first = this.scope[0] var last = this.scope.slice(-1)[0] var page = this.currentPage // default switch (dir) { case 'next': page = (first + this.paginatorSize) > this.pages ? last : (first + this.paginatorSize) break; case 'prev': page = (first - this.paginatorSize) this.paginatorSize * n) { n++ } var startPage = this.paginatorSize * (n - 1) + 1 var endPage = this.paginatorSize * n > this.pages ? this.pages : this.paginatorSize * n var arr = [] for (var i = startPage; i pages) { this.currentPage = 1 } return pages } } }) new Vue({ el: 'body', }) .u-table-container { overflow: hidden; zoom: 1; } .u-tr { display: flex; flex-direction: row; .u-td:first-child, .u-th:first-child { border-left: none; } } .u-th { font-weight: 700; } .u-th, .u-td { min-width: 120px; padding: 8px; border-left: 1px solid # ddd; border-bottom: 1px solid # ddd; word-wrap: break-word; } .u-table { border: 1px solid darken(# ddd, 10%); } .u-head { .u-th { border-bottom-color: darken(# ddd, 20%); cursor: pointer; display: flex; align-items: center; justify-content: space-between; &:hover { color: # 636363; } &.scrollbar { flex: none; border-left: none; padding: 0; border-bottom: 1px solid darken(# ddd, 10%); } } } .u-body { overflow: auto; // overflow-y: scroll; max-height: 75vh; .u-tr { &:hover { background: lighten(# f3f3f3, 2%); } } } .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 # 333; } .arrow.dsc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid # 333; } .information { text-align: right; color: rgba(0, 0, 0, .57); font-size: .9em; padding-right: 5px; } .text-center { text-align: center; } .u-search-form { text-align: right; position: relative; .u-search { border-radius: 15px; border: 1px solid # ccc; margin-bottom: 5px; min-width: 180px; padding: 5px 20px; } .ion-ios-search { position: absolute; right: 10px; top: 5px; font-size: 1.2em; } } ul.pagination { display: inline-block; padding: 0; margin: 15px 0 0 0; } ul.pagination li {display: inline;} ul.pagination li a { color: # 999; float: left; padding: 8px 16px; text-decoration: none; border-top: 1px solid # ddd; border-bottom: 1px solid # ddd; border-right: 1px solid # ddd; &:first-child { border-left: 1px solid # ddd; } } ul.pagination li a.active { background-color: # 4CAF50; color: white; } ul.pagination li a:hover:not(.active) {background-color: # ddd;}关键字：vue.js, records, length, pages
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
