Element UI Loading 组件 target 属性详解 - 如何在指定元素上显示加载状态

Element UI 的 loading 组件可以用来显示正在加载的状态，可以通过设置 'target' 属性来指定需要显示 loading 的目标元素。当设置了 'target' 属性后，loading 组件会在目标元素内部居中显示，以表示该元素正在加载中。

例如，假设有一个按钮需要在点击后加载数据，并且需要显示 loading 状态，可以使用以下代码：

<el-button @click='loadData' :loading='loading' plain>加载数据</el-button>
<el-loading :target='loadingTarget' :fullscreen='false' text='数据加载中'></el-loading>

其中，'loadData' 为按钮的点击事件处理函数，'loading' 为数据加载完成后控制按钮 loading 状态的变量，'loadingTarget' 为加载状态显示的目标元素。在 'loadData' 函数中，需要将 'loadingTarget' 设置为按钮元素，以表示加载状态应该在按钮内部显示。

loadData() {
  const self = this;
  self.loading = true;
  self.loadingTarget = self.$refs.button.$el;
  // 发送数据加载请求
  axios.get('/api/data')
    .then(function(response) {
      self.loading = false;
      // 处理加载完成后的数据
    })
    .catch(function(error) {
      self.loading = false;
      // 处理加载失败的情况
    });
}

在上面的代码中，通过 '$refs' 属性获取到按钮元素的引用，并将其设置为 'loadingTarget'。在数据加载完成后，需要将 'loading' 状态设置为 false，以隐藏 loading 组件。