引导-Vue: Table: Get索引，在对列排序后不会更改

Question

如何得到像0，1，2，3这样的索引.在对列进行排序后，哪一项不会改变？

我已经将primary-key支柱添加到<b-table>中，但是在对列进行排序后(通过单击列标题中的数组)将重新初始化初始索引。

<template>
  <div>
    <b-table striped hover :fields="fields" :items="items" primary-key>
      <!-- A virtual column -->
      <template slot="index" slot-scope="data">
        {{ data.index }}
      </template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fields: [
          "index",
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Person age',
            sortable: true
          }
        ],
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
 }
</script>

Answer 1

primary-key需要在项目数据中引用字段名。就像数据库中的主键一样，该项数据字段在所有项行中都必须是唯一的。如果不希望用户看到它，也不需要在字段定义中列出它。

即

    items: [
      { index: 1, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
      { index: 2, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
      { index: 3, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
      { index: 4, age: 38, first_name: 'Jami', last_name: 'Carney' }
    ]

传递给任何单击行处理程序的索引仍然引用可视索引(即它显示的是哪一行)。但是您可以访问事件中的项数据，并引用唯一的索引列名(例如，在上面的项示例中是index )。