javascript - Bootstrap-vue：同一张表中的两个不同的 v-slot:row-details

Question

我正在 bootstrap-vue 上制作一张桌子。也许有人遇到过这样的问题。我需要在同一张表中显示两个不同的 v-slot:row-details="row" 。但只显示一个。

              <template v-slot:cell(empty1)="data">
                <a
                  href="javascript:void(0)"
                  class="text-first mr-2"
                 @click="data.toggleDetails"
                >
                  <font-awesome-icon icon="key" class="mr-2" />Change Password
                </a>  
              </template>
              
              <template v-slot:row-details="data">
                <div class="row mb-2">
                  <div class="col-md-12 font-weight-bold">
                    <label>New Password</label>
                    <b-form-group>
                      <b-input-group>
                        <b-form-input class="rounded-0" type="password" v-model="password"></b-form-input>
                      </b-input-group>
                    </b-form-group>
                  </div>
                  <div class="col-md-12">
                    <div class="mt-2 d-flex align-items-center">
                      <b-button variant="warning" class="mr-2" @click="updateFTPAccount(data.item.id)">Change Password</b-button>
                      <b-button variant="outline-warning" @click="data.toggleDetails">Cancel</b-button>
                    </div>
                  </div>
                </div>  
              </template>

提前致谢

标签： javascriptvue.jsbootstrap-4bootstrap-vue