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

边栏推荐
- Crossing sect · paipan + Siyuan notes = private notebook
- 【考研高数 武忠祥+880版 自用】高数第二章基础阶段思维导图
- Printk debugging summary
- Build 2022 上开发者最应关注的七大方向主要技术更新
- 移动端常用解决方案
- Codeforces Round #803 (Div. 2)vp
- Mongodb learning chapter: introduction after installation lesson 1
- 加密狗资料搜集
- Send you through the data cloud
- HDU - 1024 Max Sum Plus Plus(DP)
猜你喜欢

It's not that you have a bad mind, but that you haven't found the right tool

What is the at instruction set often used in the development of IOT devices?

Qt编写自定义控件-自绘电池

2/15 (awk, awk conditions, awk processing design can perform additional tasks, and use awk array +for loop to realize advanced search)

Simple implementation of database connection pool

Detailed explanation of set

基于微信小程序的青少年生理健康知识小助手(免费获取源码+项目介绍+运行介绍+运行截图+论文)

从诺奖知“边缘计算”的未来!

【考研高数 武忠祥+880版 自用】高数第二章基础阶段思维导图

穿越派 你的数据云行
随机推荐
Learn the customization and testing of fpga---ram IP from the bottom structure
OneFlow源码解析:算子签名的自动推断
win10、win11中Elan触摸板滚动方向反转、启动“双指点击打开右键菜单“、“双指滚动“
libpng12.so.0: cannot open shared object file: No such file or directory 亲测有效
轩逸保养手册
Simple implementation of database connection pool
HDU - 1069 Monkey and Banana(DP+LIS)
Beauty of Mathematics - Application of Mathematics
Orcle创建用户+角色
穿越派与贸大合作,为大学生增添效率
【医学分割】u2net
Looking for high school student developers with similar interests
HCM 初学 ( 三 ) - 快速输入PA70、PA71 浏览员工信息PA10
Call us special providers of personal cloud services for College Students
HCM 初学 ( 一 ) - 简介
Crossing pie · pie pan + Mountain duck = local data management
Chapitre d'apprentissage mongodb: Introduction à la première leçon après l'installation
Web Security (x) what is OAuth 2.0?
从MLPerf谈起:如何引领AI加速器的下一波浪潮
Leetcode top 100 question 2 Add two numbers