Vue.js - element-ui el-table v-for 丢失了最后一项 [英] Vue.js - element-ui el-table v-for lost the last item
问题描述
我想通过标题列表生成分组表头,但是 v-for 循环丢失了最后一项.
html模板代码:
<el-table :data=tableData"条纹高亮当前行高度=100%"><模板 v-for=标题中的标题"><el-table-column v-if="typeof title === 'object'";:key="标题"固定:prop =Object.entries(标题)[0][0]";:label="Object.entries(title)[0][0]"><el-table-column v-for="subtitle in Object.entries(title)[0][1]";:key="字幕"固定 :prop="字幕":label="字幕"></el-table-column></el-table-column><el-table-column v-else :key="title";固定:道具=标题":label="title"></el-table-column></模板></el-table>
JavaScript 代码:
new Vue({el:#app",数据() {返回 {标题: [标题1",{ "title 2": ["title 2-1", "title 2-2"] },标题3",《标题4》]};}});
渲染结果如下图:
我的问题是最后一项标题 4"不显示,只剩下一个空白,希望有人能帮帮我.
element-ui的table doc在这里,演示代码在这里.
经过一些调试我发现 fixed
属性将 is-hidden
类添加到 th
元素隐藏 title4
并且不隐藏其他元素(我不明白为什么会这样!!),为了解决这个问题,我试图删除 fixed
属性并反转条件渲染:
<模板 v-for="(title,index) in titles"><el-table-column v-if="typeof title !=='object'";:key="标题":prop=标题":label="title"></el-table-column><模板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="副标题";固定 :prop="字幕":label="字幕"></el-table-column></el-table-column></模板></模板></el-table>
I want to generate grouping table head by a title list , but the v-for loop lost the last one item.
The html template code:
<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>
The JavaScript code:
new Vue({
el: "#app",
data() {
return {
titles: [
"title 1",
{ "title 2": ["title 2-1", "title 2-2"] },
"title 3",
"title 4"
]
};
}
});
The render result as following picture:
My problem is that the last item "title 4" is not displayed, only a blank is left, hope someone can help me.
The table doc of element-ui is here, and the demo code is here.
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>
这篇关于Vue.js - element-ui el-table v-for 丢失了最后一项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!