Question

虽然我可以使用v-for和内联胡须语法很好地呈现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并没有任何区别。）

Answer 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>

Answer 2

使用Vue js error: Component template should contain exactly one root element中建议的功能组件可以解决问题。

在此处复制/粘贴：

如果出于任何原因，您不想添加包装器（在我的第一种情况下，该包装器用于<tr/>组件），则可以使用功能组件。

components/MyCompo.vue文件夹中只有几个文件，而不是一个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) } )
    ]; 
  }
};

如果两个模板中都使用了某些功能或数据，则将它们作为属性传递就可以了！

我让您想象使用此模式构建组件列表以及如此多的功能。

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

2 个答案: