当前位置:网站首页>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(); // 重要代码
}); 解决效果图:

边栏推荐
猜你喜欢

OneFlow源码解析:算子签名的自动推断

Continuous breakthrough and steady progress -- Review and Prospect of cross platform development technology of mobile terminal
![[QT] QT after addition, subtraction, multiplication and division, two decimal places are reserved](/img/30/c802ae9b65601832bf52e760e9962d.png)
[QT] QT after addition, subtraction, multiplication and division, two decimal places are reserved

Debug details under pycharm

Through cooperation with the University of international trade, we can increase efficiency for college students

ssm+mysql二手交易网站(论文+源码获取链接)

论文学习记录随笔 多标签之LIFT

喊我们大学生个人云服务特供商

【QT】qt加减乘除之后,保留小数点后两位

云盘里资料被和谐了,怎么办?
随机推荐
基于TI DRV8424驱动步进电机实现调速和行程控制
数据治理:数据治理框架(第一篇)
Summary of common components of applet
Ssgssrcsr differences
C语言初阶——实现扫雷游戏
OpenGL ES: (1) OpenGL ES的由来 (转)
[excel] column operation, which performs specific column for data in a cell, such as text division by comma, colon, space, etc
TypeORM 框架
Continue to learn MySQL
运行时候的导包搜索路径虽然pycharm中标红但不影响程序的执行
数据治理:元数据管理实施(第四篇)
A little assistant for teenagers' physiological health knowledge based on wechat applet (free source code + project introduction + operation introduction + operation screenshot + Thesis)
Unity uses SQLite
亲爱的派盘用户,我要向您表白!
tese_Time_2h
Chapitre d'apprentissage mongodb: Introduction à la première leçon après l'installation
Floweable source code annotation (40) class delegation
libpng12.so.0: cannot open shared object file: No such file or directory 亲测有效
2/15 (awk, awk conditions, awk processing design can perform additional tasks, and use awk array +for loop to realize advanced search)
Actual combat: basic use of Redux