vue.js v-for 在两个表行上

Posted 2023-02-16

【中文标题】vue.js v-for 在两个表行上

【英文标题】：vue.js v-for on two table rows

【发布时间】：2018-08-07 08:19:08

【问题描述】：

Vue 2，没有 webpack。我想一次渲染两个 trs，用于主要和细节可扩展行。这就是我想要实现的目标：

<table>
   <tbody>
     <div v-for="item in items">
         <tr></tr>
         <tr class="detail-row"></tr>
     </div>
   </tbody>
</table>

问题是<div> 是 tbody 的无效子代。每次for循环迭代如何渲染两个<tr>s？

【问题讨论】：

你能用你真正想要实现的用例来扩展这个问题吗？

【参考方案1】：

在较新版本的 VueJS 中，它需要一个索引。所以解决方案看起来像

  <table>
    <tbody>
      <template v-for="(item, index) in items">
        <tr :key="index">
           <td>item.master</td>
        </tr>
        <tr :key="index" class="detail-row">
           <td>item.detail</td>
        </tr>
      </template>
    </tbody>
  </table>

【参考方案2】：

如果你想在双标签中使用。 或者想要在表格 tr 标签内的模板 div 中使用单独的组件（如在新组件中），您可以在第一个 div 中使用 style="display: contents" 以保持表格行彼此内联。

Vue 组件

<table> 
<template v-for="v-for="(price, index) in prices">
<div :key="price.id"  style="display: contents">
<tr><td>price.id</td><td>price.name</td></tr>
<tr col-span="2">price.desc</tr>
</div>
</template>
</table>

或者，如果您想为行使用单独的组件

Table.vue

<template>
<div>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<template v-for="item in items">
<my-component :item=“item”/>
</template>
</tbody>
</table>
</div>
</template>

我的组件.vue

<template>
<div style="display: contents">
<tr>
<td>item.firstname</td>
<td>item.lastname</td>
</tr>
<tr>
<td colspan="2" >
item.description
</td>
</tr>
</div>
</template>

【参考方案3】：

这是你在支持template的浏览器中解决它的方法。

<table>
   <tbody>
     <template v-for="item in items">
         <tr></tr>
         <tr class="detail-row"></tr>
     </template>
   </tbody>
</table>

如果您需要支持不支持template的浏览器，我通常会求助于渲染函数。

这是两者的工作示例。

console.clear()

new Vue(
  el: "#app",
  data: 
    items: [
        master: "Master",
        detail: "Detail"
      ,
      
        master: "Master",
        detail: "Detail"
      ,
    ]
  
)

new Vue(
  el: "#app2",
  data: 
    items: [
        master: "Master",
        detail: "Detail"
      ,
      
        master: "Master",
        detail: "Detail"
      ,
    ]
  ,
  render(h)
    // build the rows
    let rows = []
    for (let item of this.items)
      rows.push(h("tr", [h("td", [item.master])]))
      rows.push(h("tr", class: "detail-row", [h("td", [item.detail])]))
    
    
    // add rows to body
    let body = h("tbody", rows)
    
    // return the table
    return h("table", [body])
  
)

.detail-row
 background-color: lightgray;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<h2>Using template</h2>
<div id="app">
  <table>
    <tbody>
      <template v-for="item in items">
        <tr><td>item.master</td></tr>
        <tr class="detail-row"><td>item.detail</td></tr>
      </template>
    </tbody>
  </table>
</div>
  
<h2>Using render function</h2>
<div id="app2"></div>

【讨论】：

但是模板是 tbody 的有效子节点吗？我认为只允许 tr 元素

@user3599803 template 未呈现。注意这个例子。

是的。这是完全有效的，因为浏览器不呈现模板元素。

请注意，如果您使用 .vue 文件，浏览器支持并不重要，因为 vue 编译器会自动为您修复这种情况

@Ferrybig 是的，或者纯字符串模板。