列を並べ替えても変更されない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>
Propprimary-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、上記のアイテムの例）。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加