Vue.js - element-ui el-table v-for 丢失最后一项

2022-01-25 00:00:00 css vue.js vue-component vuejs2 element-ui

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

I want to generate grouping table head by a title list , but the v-for loop lost the last one item.

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 代码:

The JavaScript code:

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

渲染结果如下图:

我的问题是最后一项标题 4"没有显示，只剩下一个空白，希望有人能帮助我.

My problem is that the last item "title 4" is not displayed, only a blank is left, hope someone can help me.

element-ui的table doc是这里，演示代码在这里.

The table doc of element-ui is here, and the demo code is here.

推荐答案

经过一些调试我发现 fixed prop 将 is-hidden 类添加到 th 元素隐藏 title4 并且不隐藏其他元素(我不明白为什么会发生这种情况！)，为了解决这个问题，我试图移除 fixed 属性并反转条件渲染:

After some debugging i found that fixed prop adds is-hidden class to th element which hide the title4 and doesn't hide the other ones (i don't understand why this is happening !!), to solve this i tried to remove the fixed attribute and reverse the conditional rendering :

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

演示

相关文章