VueJS手风琴表 - 出现在表格之外 [英] VueJS Accordion Table - Appears outside of the table

问题描述

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

I have a table where the data is fetched using ajax. I'm trying to have a table where each row has an associated hidden row and clicking on the row toggles the display of the hidden row. The hidden row contains an accordion.

问题在于手风琴变得混乱并显示在表格底部，而不是显示在点击它的特定行下面。

The problem is that the accordion is getting all messed up and shows at the bottom of the table, rather than showing below the particular row that it was clicked on.

我的代码如下：

<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以便正确显示？

Where can I place the accordion div in order for it to display correctly?

编辑：

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

推荐答案

听起来像你想要一个与每一行相关的手风琴，所以实际上，你需要为每个数据项设置两个行。

It sounds like you want an accordion associated with every row, so really, you want two rows for each item of your data.

你可以通过移动来实现这一点。你的 v-for 到包装你的两行的模板标签。

You can accomplish that by moving your v-for to a template tag that wraps both of your rows.

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

Additionally, you need to control whether content is visible on a row by row basis, so add a contentVisible property to each data item and use it to control whether your second row is visible or not.

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>

这是你的更新小提琴。

这篇关于VueJS手风琴表 - 出现在表格之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！