grid.js 838 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. // register the grid component
  2. Vue.component('demo-grid', {
  3. template: '#grid-template',
  4. replace: true,
  5. props: {
  6. data: Array,
  7. columns: Array,
  8. filterKey: String
  9. },
  10. data: function () {
  11. var sortOrders = {}
  12. this.columns.forEach(function (key) {
  13. sortOrders[key] = 1
  14. })
  15. return {
  16. sortKey: '',
  17. sortOrders: sortOrders
  18. }
  19. },
  20. methods: {
  21. sortBy: function (key) {
  22. this.sortKey = key
  23. this.sortOrders[key] = this.sortOrders[key] * -1
  24. }
  25. }
  26. })
  27. // bootstrap the demo
  28. var demo = new Vue({
  29. el: '#demo',
  30. data: {
  31. searchQuery: '',
  32. gridColumns: ['name', 'power'],
  33. gridData: [
  34. { name: 'Chuck Norris', power: Infinity },
  35. { name: 'Bruce Lee', power: 9000 },
  36. { name: 'Jackie Chan', power: 7000 },
  37. { name: 'Jet Li', power: 8000 }
  38. ]
  39. }
  40. })