VueJS 手风琴表 - 出现在表之外

Question

我有一个使用 ajax 获取数据的表。我正在尝试创建一个表格，其中每一行都有一个关联的隐藏行，单击该行会切换隐藏行的显示。隐藏行包含一个手风琴。

问题是手风琴变得一团糟并显示在表格的底部，而不是显示在它被点击的特定行的下方。

我的代码如下：

<table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th v-for="column in columns">
           <span v-if="column == 'Predictive Price'">
                {{column}} 
                <i class="fa fa-info-circle" v-tooltip="msg"></i>
           </span>
           <span v-else-if="column == 'Actual Price'">
                 {{column}}
           <i class="fa fa-info-circle" v-tooltip="tooltip.actual_price"></i>
                              </span>
                              <span v-else>

                                {{column}}
                              </span>
                          </th>
                          <th>Actions</th>
                       </tr>

                   </thead>

                   <tbody>
                      <tr v-for="row in model" @click="showRow">

                          <td>
                              {{row.id}}
                          </td>

                          <td>
                              {{row.company_customer.customer_name}}
                          </td>

                          <td>
                              <i class="fa fa-map-marker"></i>
                              <small>
                                {{row.pickup_addr.address_1}}, {{row.pickup_addr.city}}, {{row.pickup_addr.postcode}}
                              </small>
                          </td>

                          <td>
                              <i class="fa fa-map-marker"></i>
                              <small>
                                  {{row.pickup_addr.address_1}}, {{row.pickup_addr.city}}, {{row.pickup_addr.postcode}}
                              </small>
                          </td>

                          <td>
                                &pound;{{row.predictive_price}}
                          </td>

                          <td>
                                &pound;{{row.actual_price}}
                          </td>

                          <td>
                              n/a
                          </td>

                          <tr>
                            <td colspan="7" v-if="contentVisible">
                                  <div class="accordian-body">
                                      ACCORDION 
                                  </div>
                            </td>
                          </tr>

                      </tr>



                  </tbody>
              </table>


<script>

export default {

    methods: {
        data() {
          return {
            msg: 'This is just an estimation!',

            tooltip: {
                actual_price: 'Click on the price to edit it.'
            },

            contentVisible: false,

          }
      },
      rowRow() {
          this.contentVisible = !this.contentVisible;
      }
    }

}

</script>

我可以在哪里放置手风琴 div 以使其正确显示？

编辑：

请看小提琴：https://jsfiddle.net/49gptnad/355/

Answer 1

听起来您想要一个与每一行关联的手风琴，所以实际上，您希望每个数据项都有 两 行。

您可以通过将 v-for 移动到包含两行的 template 标记来完成此操作。

此外，您需要逐行控制内容是否可见，因此为每个数据项添加contentVisible 属性并使用它来控制您的第二行是否可见。

console.clear()

var vm = new Vue({
  el: '#vue-instance',
  data: {
    testing: [{
        id: 1,
        name: "Customer 1",
        contentVisible: false

      },
      {
        id: 2,
        name: "Customer 1",
        contentVisible: false

      },
      {
        id: 3,
        name: "Customer 3",
        contentVisible: false

      },
    ],
    columns: ["id", "name"]
  },

  mounted() {
    console.log(this.testing);
  },

  methods: {
    showRow(data) {
      this.contentVisible = !this.contentVisible;

    }

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="vue-instance">
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th v-for="column in columns">
          {{column}}
        </th>
      </tr>
    </thead>

    <tbody>
      <template v-for="row in testing">
        <tr @click="row.contentVisible = !row.contentVisible">
           <td>{{row.id}}</td>
           <td>{{row.name}}</td>
         </tr>
         <tr v-if="row.contentVisible">
           <td :colspan="columns.length" >
             <div class="accordian-body">
               afasfafs
             </div>
           </td>
         </tr>
      </template>
    </tbody>
  </table>
</div>

这是您更新后的fiddle。