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

相关推荐
qq_364371721 小时前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森2 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
y先森7 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy7 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189117 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿8 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡9 小时前
commitlint校验git提交信息
前端
虾球xz9 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇10 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒10 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript