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。

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

ui框架 element ui

ui框架 ant design vue