b-table 组件中的所有列都可以启用排序吗？

Question

从bootstrap-vue documentation我可以看到如何启用每列排序，但是否可以对整个表进行排序？

Answer 1

这是不可能的，但您可以使用计算属性通过映射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>