Html 如何为表行中的某些（但不是全部）表单元格创建Vue.js组件？

我有一些相关的和相邻的表列，我想在同一个组件中进行分组。但是Vue.js模板系统有一个限制，即只有一个标记可以直接在

中。这个无意义的包装器通常是

。但是我能在桌子上用什么呢

我可以滥用标签，比如

，但是后果是不可接受的。同一列中的单元格大小不同，表格边框也不会折叠。有没有一种方法可以使包装器标记在理想情况下根本不会出现在HTML中，或者至少与

一样中性

表行：

<template>
    <tr v-for="thing in things">
        <td>{{thing.name}}</td>
        <size-component :size="thing.size"></size-component>
        <time-component :time="thing.time"></time-component>
    </tr>
</template>

{{thing.name}

大小列：

<template>
    <wrap>
        <td>{{size.x}}</td>
        <td>{{size.y}}</td>
        <td>{{size.z}}</td>
    </wrap>
</template>

<template>
    <wrap>
        <td>{{time.h}}</td>
        <td>{{time.m}}</td>
        <td>{{time.s}}</td>
    </wrap>
</template>

{{size.x}}
{{size.y}}
{{size.z}}

时间列：

<template>
    <wrap>
        <td>{{size.x}}</td>
        <td>{{size.y}}</td>
        <td>{{size.z}}</td>
    </wrap>
</template>

<template>
    <wrap>
        <td>{{time.h}}</td>
        <td>{{time.m}}</td>
        <td>{{time.s}}</td>
    </wrap>
</template>

{{time.h}}
{{time.m}}
{{time.s}

---

编辑：

对我来说，这归结为一个问题，即在

中没有要分组

的标记（例如

可以在

中使用多个

标记分组）。比较 从语义上讲，

就是为了达到这个目的，但这并没有帮助。

对我来说，使用以下方法是正确的解决方案：

<template>
    <fragment>
        <td>{{size.x}}</td>
        <td>{{size.y}}</td>
        <td>{{size.z}}</td>
        <td>{{volume}}</td>
    </fragment>
</template>

<script>
    import { Fragment } from 'vue-fragment';

    export default {
        computed: {
            volume() { return this.size.x * this.size.y * this.size.z },
        },
        components: { Fragment },
        props: ['size']
    }
</script>

{{size.x}}
{{size.y}}
{{size.z}}
{{volume}}
从“vue片段”导入{Fragment}；
导出默认值{
计算：{
volume（）{返回this.size.x*this.size.y*this.size.z}，
},
组件：{Fragment}，
道具：['size']
}

您是对的，这是Vue的一个限制，与此有关。但是，可以使用功能组件渲染多个根元素

<script>
export default {
  functional: true,
  props: {
    size: {
      type: Object,
      default: () => ({
        x: 1,
        y: 2,
        z: 3
      })
    }
  },
  render: (createElement, context) => [
    createElement('td', context.props.size.x),
    createElement('td', context.props.size.y),
    createElement('td', context.props.size.z)
  ]
}
</script>

导出默认值{
功能性：对，
道具：{
尺寸：{
类型：对象，
默认值：（）=>({
x:1，
y:2，
z:3
})
}
},
呈现：（createElement，上下文）=>[
createElement（'td'，context.props.size.x），
createElement（'td'，context.props.size.y），
createElement（'td'，context.props.size.z）
]
}

---

另一个选项是使用插件将computed添加到@Andreas解决方案，可以引用父属性

演示

功能组件

导出默认值{
功能性：对，
道具：{
尺寸：{
类型：对象，
默认值：（）=>({
x:1，
y:2，
z:3
})
}
},
呈现：（createElement，上下文）=>[
createElement（“td”，context.props.size.x），
createElement（“td”，context.props.size.y），
createElement（“td”，context.props.size.z），
createElement（“td”，context.parent.volume（context.props.size））
]
};

父组件

导出默认值{
组成部分：{
尺寸元件
},
数据（）{
返回{
事情：[
{
名字：'阿南'，
大小：{x:1，y:2，z:3}
}
]
};
},
安装的（）{
//测试它是否反应
setTimeout（（）=>{this.things[0].size.x=2}，3000）
},
计算：{
卷（）{
返回值（size）=>size.x*size.y*size.z；
}
},
}

哇，这个话题真是乱七八糟。您知道如何在

createElement

中使用计算属性吗？假设有

volume（）{return size.x*size.y*size.z}

。直观的解决方案是

context.computed.volume

，但这不起作用。好的，功能组件是无状态的，因此如果我理解正确，它们不应该有类似

volume（）

的内容。我得到的印象是，如果不将复杂性增加到我不想处理的程度，我想做的事情就无法完成。整个要点是通过使用几个小组件而不是一个大组件来降低复杂性。昨天我没有让vue fragment正常工作，但事实证明这是最简单的解决方案。谢谢。

vue fragment

是我的首选，有点像但语法更简单。谢谢你完成了答案。我相信这会有帮助。无论如何，我觉得这太复杂了。我想我将从

切换到

显示：表格

。因此，简单的解决方案应该是好的旧的

。我希望你能用你喜欢的解决方案发布一个答案。从

切换到

显示：table

不起作用，顺便说一句。同样的问题。