问题
须要遍历渲染的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, 然而通过尝试办法仍然是实用的, 问题解决: