4

Bootstrap Vue の Table を使用しています。行をクリックすると行の詳細を表示しようとしています。

ドキュメントが言ったようにイベントを使用しましたが、メソッドrow-clickedで行の詳細が見つかりません。toggleDetailsだから私はそれを開く方法とどこから来たのかさえ知りませんtoggleDetails。

row.clickedイベントでこの詳細行を開く方法はありますか?

または、これを行うには別の方法を使用する必要がありますか?

手がかりはありますか？

編集

私の問題をもう少し説明するコードがいくつかあります。詳細行を含むテーブルがあります。

<b-table
  v-if="items"
  :items="items"
  :fields="fields"
  show-empty
  striped
  hover
  responsive
  empty-text="There is no messages to show"
  class="col-sm-12 col-md-10"
  @row-clicked="test"
>
  <template
    slot="message"
    slot-scope="row"
  >
    {{ row.item.message }}
  </template>
  <template
    slot="row-details"
    slot-scope="row"
  >
    <code>{{ row.item.message }}</code>
  </template>
</b-table>

row.clickedテーブルで使用するイベントと、行の詳細を開こうとしているメソッドを確認できます。これは、console.log を使用した簡単な方法です。

methods: {
  test(item, index, event) {
    console.log(item, index, event);
  },
},
4

1 に答える 1

9

この特定の行の関数を呼び出すボタンを、「ベース」行のどこかに (おそらくactionsという行セルに) 配置するだけです。toggleDetails

このボタンと詳細行のコードは次のようになります。

<template slot="actions" slot-scope="row">
    <!-- We use @click.stop here to prevent a 'row-clicked' event from also happening -->
    <b-button size="sm" @click.stop="row.toggleDetails">
        {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
    </b-button>
</template>
<template slot="row-details" slot-scope="row">
    <!-- Your row details' content here -->
</template>

ドキュメントでより多くの例と説明を見つけることができます

行の任意の場所をクリックして行の詳細を表示する場合は、まず、_showDetails各項目オブジェクトに変数を追加する必要があります。

items: [
    { foo: true, bar: 40, _showDetails: false },
    ...
    { foo: true, bar: 100, _showDetails: false }
]

次に、行クリック イベントに適切な機能を追加するだけです。

<b-table @row-clicked="onRowClicked" ...></b-table>

そして、あなたのコンポーネントメソッドで：

methods: {
    onRowClicked (item, index, event) {
        item._showDetails = !item._showDetails;
    }
}
于 2018-08-14T08:10:05.447 に答える