Element表格内容超出显示省略号并提示,更改提示组件el-tooltip修改背景颜色和箭头颜色详解

2024-01-19 19:42:07

使用el-tooltip修改表格中超出内容的提示信息

当表格中的内容超出时，默认情况下会显示省略号(...)。为了让用户看到完整的文本信息，我们可以使用el-tooltip组件来显示提示信息。

<el-table>
  <el-table-column
    prop="name"
    label="姓名"
    width="100px"
    show-overflow-tooltip
  >
  </el-table-column>
  <el-table-column
    prop="description"
    label=""
    width="200px"
    show-overflow-tooltip
  >
  </el-table-column>
</el-table>

在上面的代码中，我们使用了show-overflow-tooltip属性来启用超出内容的提示信息。当用户将鼠标悬停在超出内容上时，将显示一个工具提示，其中包含完整的文本信息。

更改提示组件的背景颜色和箭头颜色

默认情况下，el-tooltip组件的背景颜色是白色，箭头颜色是黑色。我们可以通过设置background-color和color属性来更改这些颜色。

<el-table>
  <el-table-column
    prop="name"
    label="姓名"
    width="100px"
    show-overflow-tooltip
  >
  </el-table-column>
  <el-table-column
    prop="description"
    label=""
    width="200px"
    show-overflow-tooltip
  >
  </el-table-column>
</el-table>

<style>
  .el-tooltip {
    background-color: #ff6600;
    color: #ffffff;
  }

  .el-tooltip__content {
    background-color: #ff6600;
    color: #ffffff;
  }

  .el-tooltip__arrow {
    color: #ff6600;
  }
</style>