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）。

Bootstrap-Vue：表：获取对列进行排序后不变的索引

1 个答案: