1、设置行变色 <el-table :data="dataList":row-class-name="tableRowClassName":cell-style="tableCellstyle"> methods中写方法: tableRowClassName(row, rowIndex ) {if(row.row.name == 'test') {return'rowColor'}return''}, style中设置class属性: ::v-deep .el-table .rowColor{background:#f3...
第一种选中复选框表格变色 效果图: 第二种 点击行 表格变色 + 鼠标经过无hover效果 效果图: 第三种 鼠标经过自定义hover颜色效果 效果图: 第四种 点击某一事件表格背景色 变化 效果图: 结语: @selection-change="selected" 复选框被选中的触发事件 @row-click="rowClickEv" 某一行被点击行触发事件 :row-...
主要实现的原理是利用每行的下标来实现单,偶区分,添加不同的样式 <el-table :data="tableData" fit :row-class-name="tableRowClassName"> <el-table-column type="index" label="序号"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="l...
设置行内颜色渐变,并实现隔行颜色不一样 // 设置隔行变色 tableRowClassName({ rowIndex}) { if (rowIndex % 2 === 0) { return 'yellow' } else { return 'orange' } }, ::v-deep .yellow background: linear-gradient(90deg,rgba(31,94,167,0.00) 3%, rgba(31,94,167,0.40) 40%, rgba(...
* row点击的行数据; * tableData表格的全部数据; * elementIds暂存点击到的行数据id,目的实现可以选中多行变色 * checkData表格存在多选复选框时,选中的数据,目的:防止取消选中时去除了背景添加 */ export function rowClickBg(row, tableData, elementIds, checkData) { ...
本文主要介绍vue table 使用el-table为行添加自定义背景色。 概述 element-ui为开发者简化了极大的前端开发工作,但是过于强力的封装,必然导致可自定义性质的退化,有时会为了一个小功能而花费更长的时间. 此篇介绍如何对element-ui 中的el-table 添加行自定义选中背景色和hover变色效果。
1. 间隔行变色 参考链接:https://blog.csdn.net/weixin_43551840/article/details/89100478 给el-table添加属性stripe,斑马纹,即间隔行变色 样式如下: 2. 显示网格线 给el-table添加属性border 样式如下 3. 每一行添加索引 上面代码中有,索引列,label里面的内容可以自行填写,type设置为index就行 ...
我们可以使用:nth-child()伪类来实现隔行变色,使用:hover伪类来实现鼠标悬停时的效果等。 4. 使用element UI提供的自定义样式主题 element UI还提供了自定义样式主题的功能,允许我们根据实际需求来修改表格的样式。通过修改less变量或者使用element UI提供的在线主题生成工具,我们可以快速定制符合自己项目风格的表格样式...
background: #212936; /*隔行变色*/ } 1. 2. 3. table组件设置背景颜色透明 ::v-deep .el-table--fit{ padding: 20px; } ::v-deep .el-table, .el-table__expanded-cell { background-color: transparent; } ::v-deep .el-table tr { ...