<el-table :data="tableData" style="width: 100%">
<el-table-column type="expand" align="center" width="50">
<template #default="props">
<div>
<el-table :data="props.row.tableData" style="width: 100%"
height="500">
......
<el-table-column prop="address" fixed="right" label="地址"></el-table-column>
</el-table>
</div>
</template>
</el-table-column>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column prop="address" fixed="right" label="地址"></el-table-column>
</el-table>
问题:
组件使用展开行的el-table展示数据,子级el-table表格最后一列,滚动时一直会单独滚动。就像是里面有两个表格一样。
解决方案:
1. 去除父级table的 fixed="right",子级table就会正常滚动。
2. 去除子级的 height属性,没有滚动就不存在滚动问题。
原因分析:
使用css样式权重比较高,或者使用选择器进行判断table(原生html)最后一列。所以父级添加后,子级也会添加。样式互相影响,最终导致样式错乱