共计 1225 个字符，预计需要花费 4 分钟才能阅读完成。
问题
须要遍历渲染的 table 列的程序为:
this.list = [
{
label: '地区',
prop: 'province'
},
{
label: '共计',
children: [
{
label: '共计',
prop: 'totalCount'
},
{
label: '沪主板',
prop: 'shzb'
},
{
label: '科创板',
prop: 'kcb'
},
{
label: '深主板',
prop: 'szzb'
},
{
label: '创业板',
prop: 'cyb'
},
{
label: '北证',
prop: 'bjs'
}
]
},
{
label: '本年新增',
children: [
{
label: '本年新增共计',
prop: 'qTotalCount'
},
{
label: '沪主板',
prop: 'shzb'
},
{
label: '科创板',
prop: 'kcb'
},
{
label: '深主板',
prop: 'szzb'
},
{
label: '创业板',
prop: 'cyb'
},
{
label: '北证',
prop: 'bjs'
}
]
}
]渲染代码:
<el-table
:data="dataList"
style="width: 100%"
>
<el-table-column
label="序号"
type="index"
>
</el-table-column>
<el-table-column
v-for="item in list"
:label="item.label"
:prop="item.prop"
:key="item.label"
align="center"
:sortable="item.prop"
>
<div v-if="item.children">
<el-table-column
v-for="val in item.children"
:label="val.label"
:prop="val.prop"
:key="val.label"
sortable
align="center"
>
</el-table-column>
</div>
</el-table-column>
</el-table>然而理论的成果却是:
共计应该放在第一列, 然而在理论渲染后却在最初一列, 呈现了错乱
解决形式
将架构代码
<div v-if="item.children">
<el-table-column
v-for="val in item.children"
:label="val.label"
:prop="val.prop"
:key="val.label"
sortable
align="center"
>
</el-table-column>
</div>中的 div 标签换成template
起因是el-table 不能嵌套 el-table-column 以外的元素
https://github.com/ElemeFE/element/issues/1638
在我的状况中, 尽管是 el-table-column 嵌套el-table-column, 然而通过尝试办法仍然是实用的, 问题解决:
正文完
