如何在 vuejs 中创建一个 <tr> 元素，其中包含 <slot> 和 html答案

【问题标题】：How to make a <tr> element in vuejs that contains <slot> with html如何在 vuejs 中创建一个 <tr> 元素，其中包含 <slot> 和 html
【发布时间】：2019-06-28 08:10:46
【问题描述】：

我想制作一个表格行组件，它可以包含一个包含 html 的插槽。问题是浏览器在 vuejs 有机会渲染它之前将文本从表格中提升出来。

例如，我想做一个这样的表格https://codepen.io/mankowitz/pen/LqLRWr

td, th {
  border: 1px solid red;
}

.main-table {
  border: 2px solid blue;
}

<table class="main-table">
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3">Collapsed row</td>
    </tr>
    <tr>
      <td>
        <p>text</p>
        <table>
            <tr>
              <th>embedded table header</th>
            </tr>
            <tr>
              <td>embedded table text</td>
            </tr>            
        </table>
      </td>
      <td> Col2 </td>
      <td> Col3 </td>
    </tr>
    <tr>
      <td>
        regular row col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
</table>

但是，当我把它放在一个vue模板中时，格式都是错误的。见https://codepen.io/mankowitz/pen/PVmBxV

Vue.component("table-row", {
  props: ["collapsed"],
  template: `
<tr>
  <td v-if="collapsed" colspan="3">collapsed row</td>
  <td v-if="!collapsed"> <slot /> </td>
  <td v-if="!collapsed">  col2 </td>
  <td v-if="!collapsed">  col3 </td>
</tr>
`
});

const example = {};
const app = new Vue(example);
app.$mount("#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 -->
      <table-row :collapsed="1">
        <p>title text</p>
        <table>
          <tr>
            <th>embedded table header</th>
          </tr>
          <tr>
            <td>embedded table text</td>
          </tr>
        </table>
      </table-row>

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

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

    </tbody>

  </table>
</div>

【问题讨论】：

目前还不清楚您到底想做什么。更新您的问题并在适当的位置添加插槽。
我正在尝试创建一个表，其中标题与每一行对齐，如第一个 plain-html 示例所示。但是，我正在尝试使用 vuejs 中的一个组件来执行此操作，该组件为每个项目创建一个，可以选择折叠成单个。如果该行已折叠，我希望组件返回一个 3 列表示已折叠。如果它没有折叠，我希望它把槽放在第一列，其他文本放在第 2 列和第 3 列。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

我用vue的渲染功能让它工作了，你可以用模板来做，但是会更长：

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>

请注意，如果您按照我的示例使用插槽，您仍然必须包含 <td> 节点。

【讨论】：