vue中将多个元素包装成一个非情感元素标签

Posted 2023-02-22

【中文标题】vue中将多个元素包装成一个非情感元素标签

【英文标题】：Wrapping multiple elements into a non-affective element tag in vue

【发布时间】：2018-09-15 17:10:49

【问题描述】：

我有这个为表格元素创建可扩展行的 html，但是它的方法是这样的：

<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>
<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>
<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>

它适用于静态值。

但是此时，我想使用 Vue 并在我的列表中使用 v-for。但是由于有 2 个 <tbody> 元素，首先，我不能直接使用 v-for，其次（因为我不能将它们包装在 <div> 中以获取单个父元素）我无法创建组件。

我的问题是：有没有一种方法可以用作非情感元素标签，我可以将这些多个 tbody 元素包装到其中以便我可以进行循环？

<template>
   <non-affective-tag v-for="x in myList">
       <tbody class="js-table-sections-header">One row</tbody>
       <tbody>Multiple rows</tbody>
   </non-affective-tag>
</template>

---

在这里你可以看到小提琴：

https://jsfiddle.net/jeaxopwf/2/

在下面，您可以看到示例：

$('.js-table-sections-header').click(function() 
	$(this).toggleClass('open');
)

.js-table-sections-header > tr 
  cursor: pointer;

.js-table-sections-header > tr > td:first-child > i 
  -webkit-transition: -webkit-transform 0.15s ease-out;
  transition: transform 0.15s ease-out;

.js-table-sections-header + tbody 
  display: none;

.js-table-sections-header.open > tr 
  background-color: #f9f9f9;

.js-table-sections-header.open > tr > td:first-child > i 
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);

.js-table-sections-header.open + tbody 
  display: table-row-group;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="js-table-sections table table-hover">
    <thead>
        <tr>
           <th style="width: 30px;"></th>
           <th>Name</th>
           <th style="width: 15%;">Access</th>
           <th class="hidden-xs" style="width: 15%;">Date</th>
        </tr>
    </thead>
                    
    <tbody class="js-table-sections-header open">
        <tr>
          <td class="text-center">
            <i class="fa fa-angle-right"></i>
          </td>
          <td class="font-w600">Sara Holland</td>
          <td>
              <span class="label label-danger">Disabled</span>
          </td>
          <td class="hidden-xs">
              <em class="text-muted">June 7, 2015 12:16</em>
          </td>
        </tr>
     </tbody>
     <tbody>
         <tr>
            <td class="text-center"></td>
            <td class="font-w600 text-success">+ $92,00</td>
            <td>
                <small>Paypal</small>
            </td>
            <td class="hidden-xs">
                <small class="text-muted">June 19, 2015 12:16</small>
            </td>
         </tr>
         <tr>
             <td class="text-center"></td>
             <td class="font-w600 text-success">+ $54,00</td>
             <td>
                <small>Paypal</small>
             </td>
             <td class="hidden-xs">
               <small class="text-muted">June 16, 2015 12:16</small>
             </td>
         </tr>
         <tr>
            <td class="text-center"></td>
            <td class="font-w600 text-success">+ $84,00</td>
            <td>
                <small>Paypal</small>
            </td>
            <td class="hidden-xs">
                <small class="text-muted">June 26, 2015 12:16</small>
            </td>
         </tr>
         <tr>
             <td class="text-center"></td>
             <td class="font-w600 text-success">+ $24,00</td>
             <td>
                 <small>Paypal</small>
             </td>
             <td class="hidden-xs">
                 <small class="text-muted">June 27, 2015 12:16</small>
             </td>
         </tr>
     </tbody>
     
    <tbody class="js-table-sections-header" v-for="list in myList">
        <tr>
          <td class="text-center">
            <i class="fa fa-angle-right"></i>
          </td>
          <td class="font-w600">Maya</td>
          <td>
              <span class="label label-danger">Disabled</span>
          </td>
          <td class="hidden-xs">
              <em class="text-muted">June 7, 2015 12:16</em>
          </td>
        </tr>
     </tbody>
     <tbody>
         <tr>
            <td class="text-center"></td>
            <td class="font-w600 text-success">+ $82,00</td>
            <td>
                <small>Paypal</small>
            </td>
            <td class="hidden-xs">
                <small class="text-muted">June 19, 2015 12:16</small>
            </td>
         </tr>
         <tr>
             <td class="text-center"></td>
             <td class="font-w600 text-success">+ $24,00</td>
             <td>
                <small>Paypal</small>
             </td>
             <td class="hidden-xs">
               <small class="text-muted">June 16, 2015 12:16</small>
             </td>
         </tr>
         <tr>
            <td class="text-center"></td>
            <td class="font-w600 text-success">+ $34,00</td>
            <td>
                <small>Paypal</small>
            </td>
            <td class="hidden-xs">
                <small class="text-muted">June 26, 2015 12:16</small>
            </td>
         </tr>
         <tr>
             <td class="text-center"></td>
             <td class="font-w600 text-success">+ $29,00</td>
             <td>
                 <small>Paypal</small>
             </td>
             <td class="hidden-xs">
                 <small class="text-muted">June 27, 2015 12:16</small>
             </td>
         </tr>
     </tbody>
 </table>

 

【参考方案1】：

你可以use the template tag with v-for。

<template>
   <template v-for="x in myList">
       <tbody class="js-table-sections-header">One row</tbody>
       <tbody>Multiple rows</tbody>
   </template>
</template>

【讨论】：

哇！比使用 span 或 div 好多了！非常感谢