当前位置:网站首页>el-table 动态表头渲染 固定第一列 高度问题
el-table 动态表头渲染 固定第一列 高度问题
2022-07-01 05:43:00 【�孤 傲ζ】
问题效果:
话不多说 直接上代码
关键代码:
获取数据之后加上这个
整体代码:
<el-table
ref="stateStatisticsTable"
:data="tableData"
border
style="width: 100%"
:header-cell-style="{
background: 'rgb(239, 248, 255)',
color: 'rgb(96, 98, 102)',
}"
height="95%"
>
<template v-for="(itemData, indexData) in tableHeader">
<el-table-column
v-if="itemData.prop == 'unit'"
:key="itemData.prop"
:prop="itemData.prop"
:label="itemData.label"
:width="itemData.width ? itemData.width : '200'"
align="center"
fixed //固定第一列
>
</el-table-column>
<el-table-column
v-if="itemData.prop != 'unit'"
:key="itemData.prop"
:prop="itemData.prop"
:label="itemData.label"
:width="itemData.width"
align="center"
>
<template slot-scope="scope">
<div
style="width: 100%; display: flex; justify-content: center"
v-if="scope.row[itemData.prop] == '1'"
>
<div
style="
width: 12px;
height: 12px;
background-color: #167cc7;
border-radius: 50%;
"
></div>
</div>
<div
style="width: 100%; display: flex; justify-content: center"
v-if="scope.row[itemData.prop] == '2'"
>
<div
style="
width: 12px;
height: 12px;
background-color: #ef871d;
border-radius: 50%;
"
></div>
</div>
</template>
</el-table-column>
</template>
</el-table>
this.tableHeader = res.data.data.data[0].tableHeader; // 后端返回的表头
this.tableData = res.data.data.data[1].tableBody; // 数据
this.$nextTick(() => {
this.$refs.stateStatisticsTable.doLayout(); // 重要代码
});
解决效果图:
边栏推荐
- Educational administration management system (free source code)
- tese_Time_2h
- Unity project experience summary
- 数据治理:数据治理框架(第一篇)
- Deeply understand the underlying implementation principle of countdownlatch in concurrent programming
- 穿越派与贸大合作,为大学生增添效率
- C语言初阶——实现扫雷游戏
- Oracle 序列+触发器
- Ssgssrcsr differences
- Printk debugging summary
猜你喜欢
HCM 初学 ( 一 ) - 简介
Know the future of "edge computing" from the Nobel prize!
从MLPerf谈起:如何引领AI加速器的下一波浪潮
A little assistant for teenagers' physiological health knowledge based on wechat applet (free source code + project introduction + operation introduction + operation screenshot + Thesis)
论文学习记录随笔 多标签之LIFT
Ucosiii --- engineering transplantation
Debug details under pycharm
导数的左右极限和左右导数的辨析
HCM 初学 ( 四 ) - 时间
Mongodb學習篇:安裝後的入門第一課
随机推荐
Build 2022 上开发者最应关注的七大方向主要技术更新
HCM 初学 ( 三 ) - 快速输入PA70、PA71 浏览员工信息PA10
MySQL数据迁移遇到的一些错误
这才是大学生必备软件 | 知识管理
Speed regulation and stroke control based on Ti drv8424 driving stepper motor
【考研高数 自用】高数第一章基础阶段思维导图
Brief description of activation function
Unity project experience summary
vsCode函数注解/文件头部注解快捷键
亲爱的派盘用户,我要向您表白!
Actual combat: basic use of Redux
[ffmpeg] [reprint] image mosaic: picture in picture with wheat
win10、win11中Elan触摸板滚动方向反转、启动“双指点击打开右键菜单“、“双指滚动“
Learn the customization and testing of fpga---ram IP from the bottom structure
关于一道01背包问题的·拓展题的思考
SSGSSRCSR区别
Through cooperation with the University of international trade, we can increase efficiency for college students
葫芦儿 APP 使用帮助
Ssgssrcsr differences
How to transmit and share 4GB large files remotely in real time?