使用自定义组件在 Vue 中渲染 TR答案

【问题标题】：Rendering TRs in Vue using a custom component使用自定义组件在 Vue 中渲染 TR
【发布时间】：2018-12-10 05:33:02
【问题描述】：

虽然我可以使用 v-for 和内联 mustache 语法很好地呈现 HTML 表格，但我无法使用组件获得相同的结果。

Vue / 浏览器移除了包装的 TABLE 标记并将 TR 插入到 TABLE 上下文之外，因此它们无法正确呈现：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="app">

  <h2>Vue table rows inline (works)</h2>
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Value</th>
    </tr>
    <tr v-for="(row, index) in mydata">
      <td>{{row.name}}</td>
      <td>{{row.value}}</td>
    </tr>
  </table>

  <h2>Vue table rows using component (broken)</h2>
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Value</th>
    </tr>
    <my-row v-for="(row, index) in mydata" :key="row.name" :name="row.name" :val="row.value"></my-row>
  </table>

</div>

<script>
  Vue.component('my-row', {
    props: ['name', 'val'],
    template: '<tr><td>{{name}}</td><td>{{val}}</td></tr>'
  })

  new Vue({
    el: "#app",
    data: {
      mydata: [{
          name: "A",
          value: 1
        },
        {
          name: "B",
          value: 2
        },
        {
          name: "C",
          value: 3
        }
      ]
    }
  })
</script>

你也可以在https://jsfiddle.net/MCAU/eywraw8t/128217/看到这个

我需要做什么才能使组件版本正常工作？（添加 TBODY 没有任何区别。）

【问题讨论】：

标签： html vue.js

【解决方案1】：

哦，我现在找到了https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats，它解释了 TR 是一种特殊情况，需要使用以下语法：

<tr is="my-row" v-for="(row, index) in mydata" :key="row.name" :name="row.name" :val="row.value"></tr>

【讨论】：

是的，另请参阅 stackoverflow.com/questions/51110984/… 和 stackoverflow.com/questions/50619025/…

【解决方案2】：

按照Vue js error: Component template should contain exactly one root element 中的建议使用功能组件可能会成功。

在此处复制/粘贴：

如果出于任何原因，您不想添加包装器（在我的第一种情况下，它是为<tr/> 组件），您可以使用函数式组件。

components/MyCompo 文件夹中的文件很少：

components/MyCompo/index.js
components/MyCompo/File.vue
components/MyCompo/Avatar.vue

使用这种结构，您调用组件的方式不会改变。

components/MyCompo/index.js文件内容：

import File from './File';
import Avatar from './Avatar';   

const commonSort=(a,b)=>b-a;

export default {
  functional: true,
  name: 'MyCompo',
  props: [ 'someProp', 'plopProp' ],
  render(createElement, context) {
    return [
        createElement( File, { props: Object.assign({light: true, sort: commonSort},context.props) } ),
        createElement( Avatar, { props: Object.assign({light: false, sort: commonSort},context.props) } )
    ]; 
  }
};

如果您在两个模板中都使用了一些函数或数据，请将它们作为属性传递，就是这样！

我让您想象使用这种模式构建组件列表和许多功能。

【讨论】：