如何让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的方法如下
<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 封装表格的文件
/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 的配置项
element-loading-spinner="el-demo"修改为一个不存在的样式名，覆盖掉原有的loading
然后增加一个js方法
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 引用
mounted() {
this.addCustomLoading();
},此时效果是：
到此我们就实现了在element ui table中 用上了ant的loading。
原文链接：
https://juejin.cn/post/7324680413926637607