element-ui 给页面上的DOM元素加loading效果

最新推荐文章于 2025-09-09 13:44:17 发布

原创最新推荐文章于 2025-09-09 13:44:17 发布 · 3.3w 阅读

14 ·

CC 4.0 BY-SA版权

element-ui 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用Element-UI给表格、页面或其他DOM元素添加加载（loading）效果。通过在查询按钮上添加onSearch方法并利用$loading方法实现自定义加载框，包括锁定、文本、图标等设置。

一般element-ui都是给表格加loading效果，也可以给整个页面（body）加loading效果。

当然也可以页面上的任何DOM加loading效果。

在查询button的标签上添加onSearch方法。

<el-button  type="primary"  @click="onSearch">查询</el-button>

onSearch() {
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)',
      target: document.querySelector('.div1')
    });
    setTimeout(() => {
      loading.close();
    }, 2000);
}