如何让element ui table 用上ant的loading图标

ui框架 element ui

当我们使用element ui表格的时候,为了让用户区分是否在请求中。我们通常会采取增加loading的做法。例如这样:

假如此时我不想要这个图标,(我觉得太丑了。)甚至element ui 的icon我都不喜欢。那么应该怎么换呢?

ui框架 ant design vue

让我们先看看蚂蚁金服的loading效果:

我觉得好看!!!

实现这个效果,有很多种方法。 比如自己再写个布局,在表格上面套一层 写上loading效果即可。

但是我想用element ui 现成的v-loading

在表格中使用loading的方法如下

js 复制代码
<el-table 
  v-loading="loading" 
  element-loading-text="拼命加载中" 
  element-loading-spinner="el-icon-loading" 
  element-loading-background="rgba(0, 0, 0, 0.8)"
  :data="tableData" 
  style="width: 100%"> 
   <el-table-column 
   prop="date" 
   label="日期" 
   width="180">
   </el-table-column> 
 </el-table>

这个不难,大家很容易就学会了。此时效果是:

接下来开始我们改造之路;

第一步:我们将蚂蚁金服的css样式拿到element ui 封装表格的文件

css 复制代码
/deep/ .ant-loading {
  position: relative;
  display: inline-block;
  font-size: 32px;
  width: 1em;
  height: 1em;
  transform: rotateZ(45deg);
  transition: transform .3s cubic-bezier(.78, .14, .15, .86);
  animation: Rotate45 1.2s infinite linear;
  i{
    height: 14px;
    width: 14px;
    background-color: #0AA1E5;
    display: block;
    position: absolute;
    border-radius: 100%;
    transform: scale(.75);
    transform-origin: 50% 50%;
    opacity: .3;
    animation: myAnimationMove 1s infinite linear alternate;
  }
  :nth-child(1) {
    top: 0;
    left: 0;
  }
  :nth-child(2) {
    top: 0;
    right: 0;
    animation-delay: .4s;
  }
  :nth-child(3) {
    bottom: 0;
    right: 0;
    animation-delay: .8s;
  }
  :nth-child(4) {
    left: 0;
    bottom: 0;
    animation-delay: 1.2s;
  }

  @keyframes myAnimationMove {
    to {
      opacity: 1;
    }
  }

  @keyframes Rotate45 {
    to {
      transform: rotate(405deg);
    }
  }
}

接下来修改element ui table 的配置项

ini 复制代码
element-loading-spinner="el-demo"

修改为一个不存在的样式名,覆盖掉原有的loading

然后增加一个js方法

ini 复制代码
addCustomLoading () {
  setTimeout(() => {
    const loadingSpinner = document.querySelector('.el-loading-spinner');
    if (loadingSpinner) {
      const antLoading = document.createElement('span')
      antLoading.className = 'ant-loading'
      for (let i = 0; i < 4; i++) {
        const newI = document.createElement('i');
        antLoading.appendChild(newI);
      }
      loadingSpinner.appendChild(antLoading)
    }
  },100)
},

在mounted 引用

javascript 复制代码
mounted() {
  this.addCustomLoading();
},

此时效果是:

到此我们就实现了在element ui table中 用上了ant的loading。

相关推荐
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴7 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript