首先 在table里嵌套非 el-table-column 标签是很有可能造成位置错乱的,
特别是for循环 动态渲染多级表头 不能在表头里 添加div 等 可以在外面添加template 判断 if
如:
<template v-if="subjectiveData.length > 0">
<el-table-column label="得分区间情况" align="center">
<el-table-column v-for="(item, i) in subjectiveData[0].details" :key="i" :label="item.range" align="center" width="120">
<template slot-scope="scope">
{{ scope.row.details[i].rate | changeParent }}
</template>
</el-table-column>
</el-table-column>
</template>
如果外面的 列位置错乱 (使用了 定位 宽度 超过显示tooltip 等属性) 可以使用
<el-table-column v-for="(item, i) in subjectiveDataChild" :key="i" :label="item.subjectName">
<el-table-column label="参与分析人数" align="center">
<template slot-scope="scope"> {{ scope.row.details [i].analysisNum }} </template> </el-table-column>
</el-table-column>
secondClubClassChild使用promise .then的方式
.then((res) => {
this.subjectiveData= res.data
return res
}).then((res) => { this.subjectiveDataChild = (res.data || [])[0]?.details })
可以解决位置错乱问题