element-ui 表格和 tooltip修改背景颜色和箭头颜色

简介: element-ui 表格和 tooltip修改背景颜色和箭头颜色

1、element-ui tooltip 文字提示 背景修改:

第一步:(先给tooltip设置class:popper-class防止其他部分的样式被覆盖,如下所示;)

<el-tooltip popper-class="tps" enterable content="这是提示内容。"placement="bottom">
  <i class="el-icon-warning-outline"></i>
</el-tooltip>

第二步:(以下代码根据实际情况,任选一个即可;)

.tps.el-tooltip__popper {
      background: red;
    }
// 深色系可以添加一个类 is-dark
.tps.el-tooltip__popper.is-dark {
      background: red;
    }
// 系可以添加一个类 is-light
.tps.el-tooltip__popper.is-light {
      background: red;
    }

 

2、element-ui tooltip 文字提示 三角形颜色修改

   说明: .el-tooltip__popper[x-placement^=“方向”] .popper__arrow:after

                border-方向-color: red

               .el-tooltip__popper[x-placement^=“方向”] .popper__arrow

               border-方向-color: red

代码如下:(注意:如果有背景色,请将透明度分开写,如下所示)

.el-tooltip__popper[x-placement^="top"] .popper__arrow:after,
    .el-tooltip__popper[x-placement^="top"] .popper__arrow {
      border-top-color: red;
      opacity: 0.5;
    }

3、el-table中里面的show-overfloe-tooltip修改样式

<el-table
        :data="tableData"
        :max-height="'753'"
        :tooltip-effect="'tooltipStyle’”     //重点
      >
        <el-table-column
          prop="replacereason"
          label="更改原因"
          :show-overflow-tooltip="true"
        ></el-table-column>
</el-table>
.is-tooltipStyle {
  background: #fff;
  color: #3759af;
  border: 1px solid rgb(158, 157, 157);
  font-size: 15px;
}
相关文章
|
2月前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
3月前
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
65 1
|
3月前
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
374 0
Element UI & Element Plus之改变表格单元格颜色
|
3月前
|
计算机视觉
ElementUI——vue2+element-ui 2.x的动态表格和表单
ElementUI——vue2+element-ui 2.x的动态表格和表单
135 1
|
3月前
|
JavaScript 前端开发 Shell
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
70 0
|
4月前
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
113 0
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
|
4月前
Element UI 表格【列宽自适应】
Element UI 表格【列宽自适应】
122 0
|
4月前
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
423 0
|
4月前
|
前端开发
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
198 0
|
4月前
|
JavaScript
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
58 0
下一篇
无影云桌面