el-table样式总结—持续更新

1.el-table标签的header-cell-style给指定的表头添加样式

 :header-cell-style="getRowClass"

 getRowClass ({ row, column, rowIndex, columnIndex }) { if ((rowIndex === 0 && columnIndex === 0) || (rowIndex === 1 && (columnIndex === 0 || columnIndex === 1))) {return 'background:#c90a5b;color:#fff;text-align:center;font-size:15px;font-weight:550;';} else {return '';}}

rowIndex===0是第一行，columnIndex===0是第一列。 return ' css样式 '

2. el-table标签的:span-method合并单元格，不包含表头

:span-method="rowSpanMethod"

if里面可以自定义，return[0,0]表示不合并。return[行数，列数]

   rowSpanMethod({ row, column, rowIndex, columnIndex }) {/*** 表格合并* row 表格每一行的数据* column 表格每一列的数据* rowIndex 表格的行索引,不包括表头,从0开始* columnIndex 表格的列索引,从0开始*/if (this.areaShow || this.teamShow) {if (columnIndex === 0) {if (rowIndex % areaAndTeamRowCount === 0) { return [areaAndTeamRowCount, 1];} else {return [0, 0];}}}}

3. el-table标签的:cell-style给特定表格添加样式，return cellStyle + ' css样式'

  :cell-style="cellStyle"

  cellStyle({ row, column, rowIndex, columnIndex }) {if (diffRow === 0 && rowIndex % temCount === 0) {if (cellValue < this.standardParameter.stoveRunCount) {return cellStyle + 'color:#f00;';}}}

el-table样式总结—持续更新相关推荐

CSS好看的背景颜色样式（持续更新）
1 红色 #D24D57 2 绿色 #26A65B 3 橙色 #EB7347 4 黑色 #2C3E50 5 暗绿色 #84AF9B 6 橙红色 #FC9D99 7 草绿色 #AEDD81 8 蓝色 # ...
Android开发样式问题总结【持续更新】
目录 Android控件/框架开源库收集配置国内仓库 1. Java中设置控件的大小需要把dp先转换为像素(转换如下) 2. Java中设置GridLayout布局的layout_columnWei ...
前端项目总结干货 + 渡一、coderwhy、黑马、尚硅谷实操笔记（第二版，持续更新中~~~）
前端学习笔记(温馨提示:最好根据目录查看笔记) 构建vite.vue项目 1.npm create vite@latest my-vue-app 2.vue create vue01 知识储备响应式 ...
前端面试题（附答案）持续更新中……
前端面试笔记前言一.HTML篇 1.语义话的目的是什么?? 2.HTML5新特征??? 3.cookie与sessionStorage和localStorage的区别??? 二.CSS篇 1.cs ...
vue通用后台管理系统（保姆级）--持续更新中
配合目录使用更加友好哦,文章中分享的项目搭建是完全从0-1搭建,完全适用于小白,可用于vue练手项目,目前还在持续更新中,本篇文章不会断更,因工作原因,只能晚上给大家更新,感觉还行的可以给个关注或者收 ...
Java 最常见的 10000+ 面试题及答案整理：持续更新
Java面试题以及答案整理[最新版]Java高级面试题大全(2021版),发现网上很多Java面试题都没有答案,所以花了很长时间搜集,本套Java面试题大全,汇总了大量经典的Java程序员面试题以及答 ...
Vue -- 指令【学习笔记】（持续更新）
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
Android面试总结（持续更新修改）
###Android面试总结(持续更新修改) 1.Android 的四大组件是哪些,它们的作用? ①Activity是Android程序与用户交互的窗口,是Android构造块中最基本的一种,它需要为 ...
详细前端面试题javascript篇--持续更新
最新前端面试题汇总大全(超详细含vue,react,css,js,webpack,性能优化等)–持续更新点击查看前端HTML篇前端CSS篇前端面试题js篇--持续更新 1. JS 数据类型 ?存 ...

el-table样式总结—持续更新

el-table样式总结—持续更新相关推荐

最新文章

热门文章