RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 668378
Accepted
user231246
user231246
Asked:2020-05-20 15:41:39 +0000 UTC2020-05-20 15:41:39 +0000 UTC 2020-05-20 15:41:39 +0000 UTC

带分页的 Vuejs 网格 (Pagination)

  • 772

官方示例中有一个Grid:
How can I make it "paginated"?
数据总是可以是不同的数量。

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 }
    ]
  }
})
vue.js
  • 2 2 个回答
  • 10 Views

2 个回答

  • Voted
  1. Best Answer
    Eugene Kulakov
    2020-05-28T04:38:14Z2020-05-28T04:38:14Z

    @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);
    }
    <script src="https://unpkg.com/vue@2.3.3/dist/vue.min.js"></script>
    <!-- component template -->
    <script type="text/x-template" id="grid-template">
      <div>
        <table>
          <thead>
            <tr>
              <th v-for="key in columns" @click="sortBy(key)" :class="{ active: sortKey == key }">
                {{ key | capitalize }}
                <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
              </span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="entry in dataPerPage">
              <td v-for="key in columns">
                {{entry[key]}}
              </td>
            </tr>
          </tbody>
        </table>
        <div id="page-navigation">
          <button @click=movePages(-1)>Back</button>
          <p>{{startRow / rowsPerPage + 1}} out of {{Math.ceil(filteredData.length / rowsPerPage)}}</p>
          <button @click=movePages(1)>Next</button>
        </div>
      </div>
    </script>
    
    <!-- demo root element -->
    <div id="demo">
      <form id="search">
        Search <input name="query" v-model="searchQuery">
      </form>
      <demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery" :rows-per-page="10">
      </demo-grid>
    </div>

    • 6
  2. Oleg Shleif
    2020-05-26T15:04:10Z2020-05-26T15:04:10Z

    下午好尤金,这是一个分页的例子

    HTML

    <table>
      <thead>
        <tr>
          <th v-for="key in columns">
            {{key | capitalize}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="entry in data | limitBy rowsPerPage startRow">
          <td v-for="key in columns">
            {{entry[key]}}
          </td>
        </tr>
      </tbody>
    </table>
    <div id="page-navigation">
      <button @click=movePages(-1)>Back</button>
      <p>{{startRow / rowsPerPage + 1}} out of {{Math.ceil(data.length / rowsPerPage)}}</p>
      <button @click=movePages(1)>Next</button>
    </div>
    

    JS

    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)]);
    });
    
    // register the grid component
    Vue.component('grid', {
      template: '#grid-template',
      props: {
        data: Array,
        columns: Array,
        movePages: Function,
        startRow: Number,
        rowsPerPage: Number
      }
    });
    
    // Create the view-model
    var gridViewModel = new Vue({
      el: '#grid-view-model',
      data: {
        searchQuery: '',
        gridColumns: ['name', 'power'],
        gridData: gridData,
        startRow: 0,
        rowsPerPage: 10
      },
      methods: {
        movePages: function(amount) {
          var newStartRow = this.startRow + (amount * this.rowsPerPage);
          if (newStartRow >= 0 && newStartRow < gridData.length) {
            this.startRow = newStartRow;
          }
        },
        resetStartRow: function() {
          this.startRow = 0;
        }
      },
      filters: {
        orderByBusinessRules: function(data) {
          return data.slice().sort(function(a, b) {
            return a.power - b.power;
          });
        }
      }
    })
    
    • 1

相关问题

  • 如何将道具传递给使用“组件”伪元素呈现的组件?

  • Vue.js 网格组件示例更改列名称

  • VueJS 不渲染列表

  • vue js 不从 $data 更新参数

  • Vue js 循环使用组件

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    Python 3.6 - 安装 MySQL (Windows)

    • 1 个回答
  • Marko Smith

    C++ 编写程序“计算单个岛屿”。填充一个二维数组 12x12 0 和 1

    • 2 个回答
  • Marko Smith

    返回指针的函数

    • 1 个回答
  • Marko Smith

    我使用 django 管理面板添加图像,但它没有显示

    • 1 个回答
  • Marko Smith

    这些条目是什么意思,它们的完整等效项是什么样的

    • 2 个回答
  • Marko Smith

    浏览器仍然缓存文件数据

    • 1 个回答
  • Marko Smith

    在 Excel VBA 中激活工作表的问题

    • 3 个回答
  • Marko Smith

    为什么内置类型中包含复数而小数不包含?

    • 2 个回答
  • Marko Smith

    获得唯一途径

    • 3 个回答
  • Marko Smith

    告诉我一个像幻灯片一样创建滚动的库

    • 1 个回答
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Алексей Шиманский 如何以及通过什么方式来查找 Javascript 代码中的错误? 2020-08-03 00:21:37 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    user207618 Codegolf——组合选择算法的实现 2020-10-23 18:46:29 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5