elTable 中 多级表头动态循环 位置错误

838 阅读1分钟

首先 在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 })

可以解决位置错乱问题