码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • element 表格多级表头子列固定


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

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

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

    如下:

     总宽度相等,如下:

    1. <el-table :data="tableData" class="tableStyle tableRadius" stripe
    2. :header-row-class-name="headerRow"
    3. v-loading="tabsPage[version].loading"
    4. :cell-style="cellStyle"
    5. border>
    6. <el-table-column :label="item.label" v-for="(item,i) of tableHeader" :width="item.width" :key="i" :fixed="item.fixed">
    7. <el-table-column
    8. show-overflow-tooltip
    9. v-for="(ite,j) in item.child"
    10. :width="ite.width"
    11. :fixed="ite.fixed"
    12. :key="j"
    13. :prop="ite.prop"
    14. :label="ite.label"
    15. :formatter="ite.formatter">
    16. </el-table-column>
    17. </el-table-column>
    18. </el-table>
    1. {
    2. label: '预测参数', prop: '',
    3. fixed:true,
    4. width: '660',
    5. child: [
    6. {label: '公司代码', prop: '', fixed: 'left',width: '80',},
    7. {label: '资产号', prop: '', fixed: 'left',width: '110'},
    8. {label: '年度', prop: '', fixed: 'left',width: '70'},
    9. {label: '资产类别', prop: '', fixed: 'left',width: '120'},
    10. {label: '电压等级', prop: '', fixed: 'left',width: '80'},
    11. {label: '资本化日期', prop: '', fixed: 'left',width: '100'},
    12. {label: '利润中心', prop: '', fixed: 'left',width: '100'},
    13. {label: '预测属性01', prop: ''},
    14. {label: '预测属性02', prop: ''},
    15. {label: '预测属性03', prop: ''},
    16. ]
    17. },

    最终效果如下:

     

  • 相关阅读:
    windows查看连接过wifi的密码
    基于Springboot+Layui餐厅点餐系统
    技术一般,如何年薪百万
    机器学习实战——股票close预测
    java计算机毕业设计技术旅游平台(附源码、数据库)
    七夕玫瑰花合集
    基于大语言模型+RAG实现的日程管理
    【英雄哥七月集训】第 21天:无限集中的最小数字
    拉曼光谱仪 便携式手持拉曼光谱分析仪识别仪 1064激发波长 抗荧光干扰 无损快速一键检测TFN F670
    Kafka - 03 Kafka单机环境和伪集群环境的搭建
  • 原文地址:https://blog.csdn.net/weixin_42421494/article/details/125534502
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号