행 요소 폼 행 가져오기클릭 이벤트

행 요소 폼 행 가져오기클릭 이벤트

Bootstrap Vue의 테이블을 사용하고 있는데 행을 클릭할 때 행 세부 정보를 표시하려고 해.

나는 사용했다.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테이블에서 사용하는 이벤트와 행 세부 정보를 열려는 내 방법콘솔.log를 사용하면 간단한 방법이다.

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

당신이 해야 할 일은 당신의 "베이스" 행(아마도 행동이라고 불리는 행 셀 안에) 어딘가에 전화를 거는 버튼만 배치하면 된다.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>

설명서에서 더 많은 예와 설명을 찾을 수 있다.

행의 아무 곳이나 클릭하여 행 세부 정보를 표시하려면 먼저 a를 추가하십시오._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;
    }
}

참조URL: https://stackoverflow.com/questions/51836186/get-row-element-form-row-clicked-event