[Vuejs]-How to make a <tr> element in vuejs that contains <slot> with html

by

0👍

I made it work with the vue render function, you can probably do it with the template, but it will be longer:

Vue.component("table-row", {
  props: ["collapsed"],
  render: function(h) {
    if (this.collapsed == 1) {
      return h('tr', [h('td', {attrs: {colspan: 3}}, 'collapsed')]);
    }
    return h('tr', this.$slots.default);
  }
});


const app = new Vue({el: '#app'});
th, td {
  border: 1px solid red;
  padding: 1px;
}

.main-table {
  border: 2px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table class="main-table">
    <thead>
      <tr>
        <th>Main Col 1</th>
        <th>Main Col 2</th>
        <th>Main Col 3</th>
      </tr>
    </thead>

    <tbody>

      <!-- This row has table inside table -->
      <tr is="table-row" :collapsed="0">
        <td>
        <p>title text</p>
        <table>
          <tr>
            <th>embedded table header</th>
          </tr>
          <tr>
            <td>embedded table text</td>
          </tr>
        </table>
        </td>
        <td></td>
        <td></td>
      </tr>

      <!-- This row is normal  -->
      <tr is="table-row" :collapsed="0">
        <td>This row is not collapsed</td>
        <td></td>
        <td></td>
      </tr>

      <!-- This row is collapsed (hidden)  -->
      <tr is="table-row" :collapsed="1">
        <td>This row is collapsed</td>
      </tr>

    </tbody>

  </table>
</div>

Note that if you use the slot as per my example you’ll still have to include the <td> nodes.

Leave a comment