vue.js 点击后如何关闭上一行查看新行的详细信息

oxiaedzo 于 2023-06-06 发布在 Vue.js

关注(0)|答案(1)|浏览(198)

这是我从Bootstrap Vue中得到的例子。在我点击“显示详细信息”按钮后，它将显示行的详细信息，但我希望它在点击它时关闭前面的行，只打开当前点击行的详细信息。如何做到这一点？

<template>
  <div>
    <b-table :items="items" :fields="fields" striped responsive="sm">
      <template #cell(show_details)="row">
        <b-button size="sm" @click="row.toggleDetails" class="mr-2">
          {{ row.detailsShowing ? 'Hide' : 'Show'}} Details
        </b-button>
      </template>

      <template #row-details="row">
        <b-card>
          <b-row class="mb-2">
            <b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
            <b-col>{{ row.item.age }}</b-col>
          </b-row>
        </b-card>
      </template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fields: ['first_name', 'last_name', 'show_details'],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          {
            isActive: false,
            age: 89,
            first_name: 'Geneva',
            last_name: 'Wilson',
            _showDetails: true
          },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

vue.js

来源：https://stackoverflow.com/questions/76328815/how-to-close-previous-row-after-clicked-view-details-of-new-row

1条答案

按热度按时间

plupiseo1#

这应该给予你一些关于如何实现这个特性的想法。您需要创建自己的自定义方法，而不是在这里使用toggleDetails方法。

new Vue({
  el: '#app',
  data() {
    return {
      fields: ['first_name', 'last_name', 'show_details'],
      items: [{
          isActive: true,
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          isActive: false,
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          isActive: false,
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson',
          _showDetails: true
        },
        {
          isActive: true,
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney'
        }
      ]
    }
  },
  methods: {
    clickOnRow(item) {
      this.items.forEach((element) => {
        this.$set(element, "_showDetails", false)
      })
      this.$set(item, "_showDetails", !item._showDetails)
    }
  },
  mounted() {},


})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-table :items="items" :fields="fields" striped responsive="sm">
    <template #cell(show_details)="{ item }">
        <b-button size="sm" class="mr-2" @click="clickOnRow(item)">
          {{ item._showDetails ? 'Hide' : 'Show'}} Details
        </b-button>
      </template>

    <template #row-details="row">
        <b-card>
          <b-row class="mb-2">
            <b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
            <b-col>{{ row.item.age }}</b-col>
          </b-row>
        </b-card>
      </template>
  </b-table>
</div>

赞(0）回复(0）举报 2023-06-06

我来回答

vue.js 点击后如何关闭上一行查看新行的详细信息

1条答案

相关问题

热门标签

最新问答