Можно ли включить сортировку для всех столбцов в компоненте b-таблицы? - PullRequest
Новая
       46

Можно ли включить сортировку для всех столбцов в компоненте b-таблицы?

0 голосов
/ 21 января 2019

Из bootstrap-vue documentation я вижу, как включить сортировку по столбцу, но возможно ли это сделать для всей таблицы?

1 Ответ

0 голосов
/ 21 января 2019

Это невозможно, но вы можете использовать вычисляемое свойство, чтобы легко справиться с этим, сопоставив свойство fields и добавив сортируемый ключ с истинным значением, например: 

new Vue({
  el: "#app",
  data() {
    return {
      // Note 'isActive' is left out and will not appear in the rendered table
      fields: [{
          key: 'last_name'

        },
        {
          key: 'first_name'

        },
        {
          key: 'age',
          label: 'Person age',

        }
      ],
      items: [{
          isActive: true,
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          isActive: false,
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          isActive: false,
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson'
        },
        {
          isActive: true,
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney'
        }
      ]
    }
  },
  computed: {
    sortable_cols() {
      return this.fields.map(f => {
        let tmp = f;
        tmp.sortable = true;
        return tmp
      })

    }
  }

})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table striped hover :items="items" :fields="sortable_cols"></b-table>
</div>

если вы не определяете свойство fields, вы можете использовать следующий код: 

new Vue({
  el: "#app",
  data() {
    return {

      items: [{
          isActive: true,
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          isActive: false,
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          isActive: false,
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson'
        },
        {
          isActive: true,
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney'
        }
      ]
    }
  },
  computed: {
    sortable_cols() {
      return Object.keys(this.items[0]).map(f => {
        let tmp = {};
        tmp.sortable = true;
        tmp.key = f;
        return tmp
      })
    }
  }

})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table striped hover :items="items" :fields="sortable_cols"></b-table>
</div>
...