Bootstrap-Vue: Table: 获取列排序后不变的索引

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

Prop primary-key 需要在您的项目数据中引用一个字段名称。就像数据库中的 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' }
    ]

传递给任何 row-clicked 处理程序的索引仍然指的是视觉索引（即它显示为哪一行）。但您可以访问事件中的项目数据并引用您的唯一索引列名称（即上述项目示例中的 index）。

Bootstrap-Vue: Table: 获取列排序后不变的索引

Bootstrap-Vue: Table: Get index which doesn't change after sorting a column

bootstrap-vue