Vue.js -元素-ui el-table v-表示丢失了最后一项

Question

我想通过标题列表生成分组表头，但是v-for循环丢失了最后一项。

html模板代码：

<div id="app">
  <el-table :data="tableData" stripe highlight-current-row height="100%">
    <template v-for="title in titles">
      <el-table-column v-if="typeof title === 'object'" :key="title" fixed :prop="Object.entries(title)[0][0]"
                       :label="Object.entries(title)[0][0]">
        <el-table-column v-for="subtitle in Object.entries(title)[0][1]" :key="subtitle" fixed :prop="subtitle"
                         :label="subtitle">
        </el-table-column>

      </el-table-column>
      <el-table-column v-else :key="title" fixed :prop="title" :label="title">
      </el-table-column>
    </template>
  </el-table>
</div>

JavaScript代码：

new Vue({
  el: "#app",
  data() {
    return {
      titles: [
        "title 1",
        { "title 2": ["title 2-1", "title 2-2"] },
        "title 3",
        "title 4"
      ]
    };
  }
});

呈现结果如下：

​

​

我的问题是，最后一项“标题4”没有显示，只留下一个空白，希望有人能帮助我。

element的表文档是这里，演示代码是这里。

Answer 1

经过一些调试后，我发现fixed prop将is-hidden类添加到th元素中，该元素隐藏the title4，而不隐藏其他元素(我不明白为什么会发生这种情况!!)，为了解决这个问题，我尝试删除fixed属性并反转条件呈现：

  <el-table :data="tableData" stripe highlight-current-row height="100%">
    <template v-for="(title,index) in titles">
         <el-table-column  v-if="typeof title !== 'object'" :key="title"  :prop="title" :label="title">
      </el-table-column>
      <template v-else>
      <el-table-column  :prop="Object.entries(title)[0][0]" :label="Object.entries(title)[0][0]">
        <el-table-column v-for="subtitle in Object.entries(title)[0][1]" :key="subtitle" fixed :prop="subtitle" :label="subtitle">
        </el-table-column>

      </el-table-column>
       </template>
    </template>
  </el-table>

演示