element 表格多级表头子列固定的实现

更新时间：2022年06月30日 11:33:46 作者：I'm李刚

本文主要介绍了element 表格多级表头子列固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

element 中 table 固定列使用fixed 属性；但是多级表头时只能固定第一列；

设置对应子列表头的宽度和父系表头的宽度可以使对应的列固定；

不需要固定的列则不需要设置宽度，同时父级表头的宽度需要和子级表头固定列的总宽度相等，不然会出现内容显示不全或者把后面的列遮挡的问题。

如下：

总宽度相等，如下：

<el-table :data="tableData" class="tableStyle tableRadius" stripe
                        :header-row-class-name="headerRow"
                        v-loading="tabsPage[version].loading"
                        :cell-style="cellStyle"
                        border>
                            <el-table-column :label="item.label" v-for="(item,i) of tableHeader" :width="item.width" :key="i" :fixed="item.fixed">
                                <el-table-column
                                    show-overflow-tooltip
                                    v-for="(ite,j) in item.child"
                                    :width="ite.width"
                                    :fixed="ite.fixed"
                                    :key="j"
                                    :prop="ite.prop"
                                    :label="ite.label"
                                    :formatter="ite.formatter">
                                </el-table-column>
                            </el-table-column>
                        </el-table>

{
                    label: '预测参数', prop: '',
                    fixed:true,
                    width: '660',
                    child: [
                        {label: '公司代码', prop: '', fixed: 'left',width: '80',},
                        {label: '资产号', prop: '', fixed: 'left',width: '110'},
                        {label: '年度', prop: '', fixed: 'left',width: '70'},
                        {label: '资产类别', prop: '', fixed: 'left',width: '120'},
                        {label: '电压等级', prop: '', fixed: 'left',width: '80'},
                        {label: '资本化日期', prop: '', fixed: 'left',width: '100'},
                        {label: '利润中心', prop: '', fixed: 'left',width: '100'},
                        {label: '预测属性01', prop: ''},
                        {label: '预测属性02', prop: ''},
                        {label: '预测属性03', prop: ''},
                    ]
                },

最终效果如下：

到此这篇关于element 表格多级表头子列固定的实现的文章就介绍到这了,更多相关element 表格多级表头子列固定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue项目配置在局域网下访问方式
这篇文章主要介绍了Vue项目配置在局域网下访问方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue如何监测数组类型数据发生改变的(推荐)
这篇文章主要介绍了Vue如何监测数组类型数据发生改变的,本文通过实例代码图文详解给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-11-11
vue中插件和组件的区别点及用法总结
在本篇文章里小编给大家分享的是一篇关于vue中插件和组件的区别点及用法总结内容，有兴趣的的朋友们可以学习下。
2021-12-12
vue跳转页面的几种方法(推荐)
这篇文章主要介绍了vue不同方法跳转页面，本文给大家分享多种方法，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-03-03
vue项目启动端口更改的实现
在Vue前端项目中,可以通过修改配置文件来指定启动的端口号,本文就来介绍一下vue项目启动端口更改的实现,感兴趣的可以了解一下
2023-10-10
vue实现将图像文件转换为base64
这篇文章主要介绍了vue实现将图像文件转换为base64，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-02-02
Vue.js使用v-show和v-if的注意事项
这篇文章一开始先对Vue.js中v-show和v-if两者的区别进行了简单的介绍，而后通过图文详细给大家介绍了Vue.js使用v-show和v-if注意的事项，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-12-12
Vue ELement Table技巧表格业务需求实战示例
这篇文章主要介绍了Vue ELement Table技巧表格业务需求实战示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
Vue滚动到指定位置的多种方式示例详解
当容器有滚动条时,有时需要将指定的内容自动滚动到可视区域,怎么实现呢,下面小编给大家带来了多种方法实现Vue滚动到指定位置,感兴趣的朋友跟随小编一起看看吧
2023-08-08
VUE跨域问题Access to XMLHttpRequest at
今天发现一个错误，VUE发送请求的时候不能请求到正确数据，VUE跨域问题Access to XMLHttpRequest at，本文就详细的来介绍一下解决方法，感兴趣的可以了解一下
2022-05-05

element 表格多级表头子列固定的实现

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具