我想通过标题列表生成分组表头，但 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-ui的表文档是here https://element.eleme.io/#/en-US/component/table#grouping-table-head，演示代码是here https://codepen.io/lonsty/pen/gOPyWNB.
经过一些调试我发现fixed道具添加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>
Demo https://codepen.io/boussadjra/pen/abdxwgj
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
