如何在表格行中制作一些（但不是全部）表格单元格的 Vue.js 组件？

Question

我有一些相关的和相邻的表列，我想将它们分组到同一个组件中。但是 Vue.js 模板系统有这个限制，只有一个标签可以直接在<template> 中。通常这个无意义的包装是<div>。但是我可以在表格中使用什么？

我可以为此滥用<span> 之类的标签，但后果是不可接受的。同一列中的单元格大小不同，表格边框不折叠。有没有办法让包装标签在理想情况下根本不会出现在 HTML 中，或者至少像 <div> 一样中性？

表格行：

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

列大小：

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

---

编辑：

对我来说，这归结为问题，在<tr> 中没有标签可以将<td>s 分组（就像<tr>s 可以用多个<tbody> 标签分组在<table> 中）。比较Is there a tag for grouping "td" or "th" tags? 语义上<colgroup> 是为此目的而设计的，但这并没有帮助。

对我来说，使用 vue-fragment 原来是正确的解决方案：

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

Answer 1

你说得对，这是 Vue 的限制，与 the diffing algorithm 有关。但是，您可以使用函数式组件来呈现多个根元素。

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

另一种选择是使用插件vue-fragments

Answer 2

要将计算添加到@Andreas 解决方案，可以引用父属性。

演示CodeSandbox

功能组件

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),
    createElement("td", context.parent.volume(context.props.size))
  ]
};

父组件

export default {
  components: {
    SizeComponent
  },
  data() {
    return {
      things: [
        {
          name: 'aName',
          size: { x: 1, y: 2, z: 3 }
        }
      ]
    };
  },
  mounted() {
    // test it is reactive
    setTimeout(()=> { this.things[0].size.x = 2 }, 3000) 
  },
  computed: {
    volume() {
      return (size) => size.x * size.y * size.z;
    }
  },
}