Vuejs2 - Iterate “tr” element recursively

Question

I'm pretty new to Vue and I love it so far. However, I've encountered the following problem and I'll be thankful for any suggestions on how to get around it.

I would like to iterate recursively on an objects to get a nested table.

I have this template:

<script type="text/x-template">
    <tr>
        <td><a v-on:click="toggle">[+]</a></td>
        <td>...</td>
    </tr>
    <tr is="row-item"  v-show="open" ...></tr>
</script>

It's recursive, so each line tr has an other hidden line tr below.

When the user click on the [+] on the parent line, the children lines will appear.

I already try to wrap the content within a tbody tag, but then I get tbody inside tbody, which is still an illegal table layout and breaks it.

<script type="text/x-template">
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr is="row-item" ...></tr>
    </tbody>
</script>

Fiddle: https://jsfiddle.net/rafi16d/puwcs9ay/

[email protected] doesn't require exactly one root element. How can I do without ?

Has anyone run into anything similar?

Thanks.

Answer 1

(Sadly) Vue2 imperatively needs a real root element for each component. So from that I think you don't have so many possibilities:

• Do two components instead of a single one, and iter both of them with a virtual node:

  <table>
      <tbody>
          <template for="row in someRows">
              <tr>mainRow</tr>
              <tr>subRow</tr>
          </template>
      </tbody>
  </table>
  

• Forget the idea to do a real table. Emulate the layout by using <div> and the related display css properties instead.

Answer 2

Alright i managed to do it. Red borders are for you to see the structure, you may want to adjust the padding.

https://jsfiddle.net/guanzo/puwcs9ay/9/

Several hacks, and ideas i borrowed from how jQuery Datatables does nested rows:

You can put pretty much anything in a td. So make the root element a tr, nest a td with colspan 100%, then you can nest a table. Since you can put tr inside of table, the recursion begins.

tr -> td -> table -> tr -> td -> table ad infinitum

<td colspan="42">

42, or any number that's definitely higher than your column count, is basically equivalent to colspan="100%".

You also can - and probably should - use the length of your array to give the colspan the correct number of columns, i was just lazy.

Inner trs have their default css changed.

.inner-tr{
    display: table;
    width:100%;
}