Vue.js - element-ui el-table v-for 丢失了最后一项
Vue.js - element-ui el-table v-for lost the last item
我想按标题列表生成分组 table,但 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"
]
};
}
});
渲染结果如下图:
我的问题是最后一项“title 4”没有显示,只剩下一个空白,希望有人能帮助我。
经过一些调试我发现 fixed
prop 将 is-hidden
class 添加到 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>
我想按标题列表生成分组 table,但 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"
]
};
}
});
渲染结果如下图:
我的问题是最后一项“title 4”没有显示,只剩下一个空白,希望有人能帮助我。
经过一些调试我发现 fixed
prop 将 is-hidden
class 添加到 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>