如何让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。

相关推荐
也无晴也无风雨28 分钟前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤5 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui