javascript - 在不关闭另一个的情况下打开每个嵌套的 Tr 元素

Question

当您单击嵌套表位于其下方的 TR 元素时，我已请求嵌套表中的 api。当我单击另一个 tr 时，来自 in tr 的数据进入上层并使数据相同这是我的表格视图

<thead>
   <tr>
      <th>#</th>
      <th>Paper Board</th>
      <th>
         <div class="row">
            <div class="col-md-8 text-center">Openings</div>
         </div>
         <div class="row">
            <div class="col-md-4 text-center">Reams</div>
            <div class="col-md-4 text-center">sheets</div>
         </div>
      </th>
      <th>
         <div class="row">
            <div class="col-md-8 text-center">Inward</div>
         </div>
         <div class="row">
            <div class="col-md-4 text-center">Reams</div>
            <div class="col-md-4 text-center">sheets</div>
         </div>
      </th>
      <th>
         <div class="row">
            <div class="col-md-8 text-center">Outward</div>
         </div>
         <div class="row">
            <div class="col-md-4 text-center">Reams</div>
            <div class="col-md-4 text-center">sheets</div>
         </div>
      </th>
      <th>
         <div class="row">
            <div class="col-md-8 text-center">Balance</div>
         </div>
         <div class="row">
            <div class="col-md-4 text-center">Reams</div>
            <div class="col-md-4 text-center">sheets</div>
         </div>
      </th>
   </tr>
</thead>
<tbody style="cursor:pointer" v-for="(statement,index) in statements">

这是用户单击表格行时调用的单击按钮

<tr class ="accordion"
      @click="statementDetail(index,statement.paper_quality_id.id,statement.paper_brand_id.id,statement.paper_size_id.id,statement.thickness)"
      >
      <td>{{index+1}}</td>
      <td>
         {{statement.paper_quality_id.paper_quality}} -
         {{statement.paper_size_id.length}} X {{statement.paper_size_id.width}} -
         {{statement.paper_brand_id.paper_brand}} -
         {{statement.thickness}}
      </td>
      <td>
         <div class="row">
            <div
               class="col-md-4 text-center"
               >{{parseInt((statement.in_total_before - statement.total_out_before)/500)}}</div>
            <div
               class="col-md-4 text-center"
               >{{parseInt((statement.in_total_before - statement.total_out_before)%500)}}</div>
         </div>
      </td>
      <td>
         <div class="row">
            <div
               class="col-md-4 text-center"
               >{{parseInt((statement.total_sheets_in_range)/500)}}</div>
            <div
               class="col-md-4 text-center"
               >{{parseInt((statement.total_sheets_in_range)%500)}}</div>
         </div>
      </td>
      <td>
         <div class="row">
            <div
               class="col-md-4 text-center"
               >{{parseInt((statement.total_outward_range)/500)}}</div>
            <div
               class="col-md-4 text-center"
               >{{parseInt((statement.total_outward_range)%500)}}</div>
         </div>
      </td>
      <td>
         <div class="row">
            <div class="col-md-4 text-center">
               {{
               parseInt((((statement.in_total_before - statement.total_out_before) + (statement.total_sheets_in_range)) - statement.total_outward_range)/500)
               }}
            </div>
            <div class="col-md-4 text-center">
               {{
               parseInt((((statement.in_total_before - statement.total_out_before) + (statement.total_sheets_in_range)) - statement.total_outward_range)%500)
               }}
            </div>
         </div>
      </td>
   </tr>

这是我的嵌套表，它显示用户单击任何 tr 元素

   <tr :id="'show_'+index" style="display:none;">
      <td colspan="6">
         <table class="table table-hover">
            <tr>
               <th>Date</th>
               <th>Opening</th>
               <th>Inward</th>
               <th>Outward</th>
               <th>Balance</th>
            </tr>
            <tr v-for="(_statement,index) in statements_details">
               <td>{{_statement.date}}</td>
               <td>
                  <div class="row">
                     <div
                        class="col-md-3 text-center"
                        >{{parseInt((_statement.opening.total_in - _statement.opening.total_out)/500)}}</div>
                     <div
                        class="col-md-3 text-center"
                        >{{parseInt((_statement.opening.total_in - _statement.opening.total_out)%500)}}</div>
                  </div>
               </td>
               <td>
                  <div class="row">
                     <div class="col-md-3 text-center">{{parseInt((_statement.inward)/500)}}</div>
                     <div class="col-md-3 text-center">{{parseInt((_statement.inward)%500)}}</div>
                  </div>
               </td>
               <td>
                  <div class="row">
                     <div class="col-md-3 text-center">{{parseInt((_statement.outward)/500)}}</div>
                     <div class="col-md-3 text-center">{{parseInt((_statement.outward)%500)}}</div>
                  </div>
               </td>
               <td>
                  <div class="row">
                     <div
                        class="col-md-3 text-center"
                        >{{parseInt((_statement.balance.total_in - _statement.balance.total_out)/500)}}</div>
                     <div
                        class="col-md-3 text-center"
                        >{{parseInt((_statement.balance.total_in - _statement.balance.total_out)%500)}}</div>
                  </div>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</tbody>

这是点击功能

    statementDetail(rowid, paper_id, brand_id, size_id, thickness) {
      const userDetail = {
        account_access_key_id: $('#ledger_id').val(),
        start_date: this.start_date + ' 00:00:00.957761',
        end_date: this.end_date + ' 00:00:00.957761',
        paper_quality_id: paper_id,
        paper_brand_id: brand_id,
        paper_size_id: size_id,
        thickness: thickness
      }
      axios.post('/StatementDetail/', userDetail)

        .then((response) => {
          $('#show_' + rowid).toggle();
          this.statements_details = response.data;
        }).catch((err) => {
          console.log(err)
        });
    }

  },

标签： javascripthtmlcssvue.js