vue element loading遮罩层添加按钮功能实现

<el-table v-loading="loadingText" element-loading-text="拼命加载中" :data="tableData" :tableColumn="tableColumn" :span-method="objectSpanMethod" border :cell-style="cellStyle" :header-cell-style="{'text-align': 'center'}">
      <template v-slot:append>
        <el-button v-if="loadingText" type="primary" class="cancel-loading" @click="cancelLoading" size="mini">取消</el-button>
      </template>
      <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label" min-width="100" />
    </el-table>

data() {
	return {
		loadingText: false,
	}
}
cancelLoading() {
      this.loadingText = false; 
    },

.cancel-loading {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999; /* 确保 z-index 高于遮罩层 */
}

// 在Vue组件中调用this.$loading方法来显示加载指示器和遮罩层
this.$loading({
  lock: true, // 是否禁止背景滚动，默认为false
  text: 'Loading', // 加载文本提示，默认为'Loading'
  spinner: 'el-icon-loading', // 加载图标类型，默认为'el-icon-loading'
  background: 'rgba(0, 0, 0, 0.7)' // 遮罩层背景颜色，默认为'rgba(0, 0, 0, 0.7)'
})

// 在Vue组件中调用返回的Loading实例对象的close方法来关闭加载指示器和遮罩层
const loadingInstance = this.$loading({
  lock: true,
  text: 'Loading',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
})
// 数据加载完成后调用close方法来关闭加载指示器和遮罩层
loadingInstance.close()