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

Posted

技术标签:

【中文标题】Vue.js - element-ui el-table v-for 丢失最后一项【英文标题】:Vue.js - element-ui el-table v-for lost the last item 【发布时间】:2020-11-15 19:47:19 【问题描述】:

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

html模板代码:

<div id="app">
  <el-table :data="tableData" stripe highlight-current-row >
    <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"
      ]
    ;
  
);

渲染结果如下图:

我的问题是最后一项“title 4”没有显示,只剩下一个空白,希望有人能帮帮我。

element-ui的table doc为here,demo代码为here。

【问题讨论】:

【参考方案1】:

经过一些调试后,我发现 fixed 属性将 is-hidden 类添加到 th 元素中,它隐藏了 the title4 而没有隐藏其他元素(我不明白为什么会这样! !),为了解决这个问题,我尝试删除fixed 属性并反转条件渲染:

  <el-table :data="tableData" stripe highlight-current-row >
    <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>

Demo

【讨论】:

以上是关于Vue.js - element-ui el-table v-for 丢失最后一项的主要内容,如果未能解决你的问题,请参考以下文章

.net Core中Vue.js里使用Element-UI

vue+js动态切换element-ui生成的主题css文件

Vue.js 和 Jest - Element-UI 如何以编程方式确认 MessageBox?

如何使表格行可点击并展开行 - vue.js - element-ui

Element-UI使用基本介绍

关于 Vue.js+Element-UI 日期控件 日期范围选择