element ui 自定义表格颜色Loading颜色

CaiLin907

已于 2024-01-02 14:39:19 修改

阅读量1.5k

点赞数 8

分类专栏： Web 文章标签： ui vue.js 前端

于 2024-01-02 14:38:36 首次发布

本文链接：https://blog.csdn.net/xichi_12396/article/details/135340357

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<div
  v-loading="loading"
  element-loading-text="数据加载中,请稍等..."
  element-loading-spinner="el-icon-loading"
  class="loading-text">
  <el-table
    :data="tableData"
    :header-cell-style="{ background:'#32b16c' }"
    :cell-style="{ color:'#333' }"
    highlight-current-row
    border
    class="tk-table"
    @current-change="handleCurrentChange"
  >
  ...
  </el-table>
</div>

...

<style>

  ::v-deep .tk-table.el-table tbody tr:hover > td  {
    background-color: #b6efd0 !important; /* 鼠标悬浮时当前行背景色 */
  }

  ::v-deep .tk-table .el-table__body tr.current-row > td   {
    background-color: #b6efd0 !important; /* 选中时当前行背景色 */
  }

  ::v-deep .loading-text .el-loading-spinner .el-loading-text {
    color: #32b16c; /* loading状态文字颜色 */
  }

  ::v-deep .loading-text .el-loading-spinner i {
    color: #32b16c; /* loading状态图标颜色 */
  }

</style>