1. 确定 el-table 的hover 颜色修改方式 Element UI 框架为 el-table 组件提供了默认的样式,包括 hover 时的背景颜色。要修改这个颜色,你需要覆盖默认的 CSS 样式。 2. 找到 el-table 的样式文件或样式部分 通常,你可以在你的项目中创建一个自定义的 CSS 文件,或者在现有的样式文件中添加自定义样式。 3. ...
--el-table-text-color:var(--el-text-color-regular);// 表头中文字的颜色,可以通过这个变量来设置表头中文字的颜色。--el-table-header-text-color:var(--el-text-color-secondary);// 鼠标悬停在行上时的背景色,可以通过这个变量来设置鼠标悬停时行的背景色。--el-table-row-hover-bg-color:var(--el...
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{ background: #212936; /*隔行变色*/ } 1. 2. 3. table组件设置背景颜色透明 ::v-deep .el-table--fit{ padding: 20px; } ::v-deep .el-table, .el-table__expanded-cell { background-color...
// 表格格栅的第一种颜色 :deep(.el-table tr){background:#0d2852; } :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell){background:#063d8f; } // 表格格栅的第er种颜色 :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-tabl...
通过CSS 更改样式:您可以使用 CSS 更改表格的样式,例如更改表头、行、单元格等的颜色、字体、背景等属性。可以通过给元素添加类名或使用选择器来选择元素并应用样式。例如: /*更改表头背景颜色*/.el-table__header{background-color:#f0f0f0; }/*更改表格行鼠标悬停时的背景颜色*/.el-table__row:hover{backgr...
2、cell-mouse-enter:当单元格 hover 进入时会触发该事件 3、row-click:当某一行被点击时会触发该事件 图例 image.png <template><divstyle="padding:20px"><el-table:data="tableData"style="width: 100%"height="400"borderref="refTable":header-cell-style="{ background: '#F2F2F2', color: '#...
(--el-border-color-lighter);--el-table-border:0pxsolidvar(--el-table-border-color);/**这里改成0了 */--el-table-text-color:rgb(127,255,202);/**文字颜色 */--el-table-header-text-color:rgb(135,198,235);/**表头文字颜色 */--el-table-row-hover-bg-color:rgba(116,85,228,0.671...
通过以上的设置确实可以达到一定的效果,表格在hover的时候部分不高亮,这样是不满足的,所以重新找到下面的方式可以解决问题 ::v-deep .el-table .el-table__body tr.hover-row > td{ background-color:#ffffff!important } ::v-deep .el-tablle--enable-row-hover .el-table__body tr:hover > td{ ...
<el-table-columnlabel="姓名"width="180"> <templateslot-scope="scope"> <el-popovertrigger="hover"placement="top"> <p>姓名: {{ scope.row.name }}</p> <p>住址: {{ scope.row.address }}</p> <divslot="reference"class="name-wrapper"> ...
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td{background-color:transparent !important;/*color: #f19944;*//*设置文字颜色,可以选择不设置*/} 6.设置选中某一行时的样式 注意:需要在<el-table />中添加highlight-current-row属性,才会有选中的效果 ...