el-table-column嵌套el-table-column ,多级表头横向滚动的bug
elementUI的el-table组件,要做到的效果是:多级表头,前两大列固定,后面的列横向滚动。
·
项目场景:
项目场景:elementUI的el-table组件,要做到的效果是:多级表头,前两大列固定,后面的列横向滚动。
第一大列固定;第二大列默认隐藏,点击多选框才展示对应的数据,为动态展示的列。
问题描述
<el-table
:data="list"
border
style="width: 100%"
v-loading="loading"
@sort-change="sortChange"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.6)"
>
<el-table-column fixed :min-width="width" v-for="(item, i) in titleArrTime" :prop="item.value" :label="item.label" :key="i"></el-table-column>
<!-- <template > -->
<el-table-column v-if="sortable > 0" width="160" ref="weidu" label="维度" fixed>
<el-table-column :min-width="width" v-for="(item, i) in titleArrWeidu" :prop="item.value" :label="item.label" :key="i"></el-table-column>
</el-table-column>
<!-- </template> -->
<el-table-column label="当日回流用户指标">
<el-table-column sortable :min-width="width" v-for="(item, i) in titleArrDay" :prop="item.value" :label="item.label" :key="i"></el-table-column>
</el-table-column>
<el-table-column>
<div class="flex align-items-center justify-content-center" slot="header">
<div class="margin-right">总回流用户指标</div>
<condition @change="filterChange" :keyList="keyList"></condition>
</div>
<el-table-column sortable :min-width="width" v-for="(item, i) in titleArrAll" :prop="item.value" :label="item.label" :key="i"></el-table-column>
</el-table-column>
<div slot="empty">
<el-empty description="暂无数据"></el-empty>
</div>
</el-table>
** 这里要固定的前两列中,第一列没有el-table-column嵌套,第二列el-table-column里面嵌套el-table-column,这样的效果就是第一列有一层表头,第二列有两层表头,让前两列都固定,给前两列的最外层的el-table-column 添加fixed属性。查看页面,问题出现,第二列添加fixed之后的宽度一直不对,没有展示全部内容。**
原因分析:
第二大列的宽度没有被撑开,查看控制台class名为el-table__fixed的div是固定的部分。
我这里猜测:在elementUI中这种嵌套的el-table-column可能没有计算对宽度,对动态的表格宽度可能因为浏览器的渲染顺序,导数据还没有过来,页面就渲染完了,所以宽度计算的不正确。
也有可能是其他原因,希望知道这是什么原因的大神告诉我。
解决方案:
所以:当点击多选框时,触发计算第二列宽度的方法,给第二列设置宽度。
1、先给第二列一个默认宽度
2、监听sortable的变化,每次变化都要计算宽度。sortable默认为0
这种办法其实不太友好,因为vue是不提倡通过获取元素来修改样式的。
如果还有什么解决办法,希望各位大神给我留言。
更多推荐
已为社区贡献5条内容
所有评论(0)