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

边栏推荐
- 这才是大学生必备软件 | 知识管理
- Codeforces Round #803 (Div. 2)vp
- HDU - 1069 Monkey and Banana(DP+LIS)
- 亲爱的派盘用户,我要向您表白!
- 【医学分割】u2net
- 【笔记】电商订单数据分析实战
- 2/15 (awk, awk conditions, awk processing design can perform additional tasks, and use awk array +for loop to realize advanced search)
- 千万不要把笔记视频乱放!
- boot+jsp的高校社團管理系統(附源碼下載鏈接)
- Build 2022 上开发者最应关注的七大方向主要技术更新
猜你喜欢

Leetcode top 100 question 2 Add two numbers

Educational administration management system (free source code)

Basic electrician knowledge 100 questions

教务管理系统(免费源码获取)

小程序常用组件小结

芯片,建立在沙粒上的帝国!

College community management system based on boot+jsp (with source code download link)

excel高级绘图技巧100讲(一)-用甘特图来展示项目进度情况

Trust guessing numbers game

基于TI DRV8424驱动步进电机实现调速和行程控制
随机推荐
2022.6.30-----leetcode. one thousand one hundred and seventy-five
POL8901 LVDS转MIPI DSI 支持旋转图像处理芯片
Actual combat: basic use of Redux
从诺奖知“边缘计算”的未来!
Learn the customization and testing of fpga---ram IP from the bottom structure
Is it safe for a novice to open a securities account?
Mongodb學習篇:安裝後的入門第一課
HCM 初学 ( 二 ) - 信息类型
导数的左右极限和左右导数的辨析
Data governance: data governance management (Part V)
HDU - 1024 Max Sum Plus Plus(DP)
【知识点总结】卡方分布,t分布,F分布
[medical segmentation] u2net
[QT] QT after addition, subtraction, multiplication and division, two decimal places are reserved
加密狗资料搜集
2022第八届中国国际“互联网+”大学生创新创业大赛产业命题赛道开启报名!
新手在挖财开通证券账户安全吗?
论文学习记录随笔 多标签之GLOCAL
Set set detailed explanation
如何添加葫芦儿派盘