如何使 table 在初始加载时按此特定列排序？

Question

我有一个 bootstrap-vue table 看起来像这样；

这是代码；

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // Note 'isActive' is left out and will not appear in the rendered table
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Person age',
            sortable: true,
            // Variant applies to the whole column, including the header and footer
            variant: 'danger'
          }
        ],
        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' }
        ]
      }
    }
  }
</script>

这个table初始加载的时候，我想指定table按照Person age列降序排列

我正在使用 bootstrap-vue 和 Vue v2.6

Answer 1

可以在<b-table>中使用这两个属性 :

sort-by="age" :sort-desc="true"

演示：

new Vue({
  el: '#app',
  data: {
    fields: [
      {
        key: 'last_name',
        sortable: true
      },
      {
        key: 'first_name',
        sortable: false
      },
      {
        key: 'age',
        label: 'Person age',
        sortable: true,
        // Variant applies to the whole column, including the header and footer
        variant: 'danger'
      }
    ],
    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' }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet"/>
<div id="app">
  <b-table striped hover sort-by="age"
  :sort-desc="true" :items="items" :fields="fields"></b-table>
</div>

---- 或 ------

您也可以使用 .sync 选项从数据属性动态绑定这些属性。

<v-data-table
      :sort-by.sync="sortBy"
      :sort-desc.sync="sortDesc"
></v-data-table>

data () {
   return {
     sortBy: 'age',
     sortDesc: true,
  }
}

如何使 table 在初始加载时按此特定列排序？

How to make this table sort by this particular column when it initially loads?

javascript

vue.js

vue-tables-2

bootstrap-vue