element loading遮罩层添加按钮

html 复制代码
<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>
javascript 复制代码
data() {
	return {
		loadingText: false,
	}
}


cancelLoading() {
      this.loadingText = false; 
    },
css 复制代码
.cancel-loading {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999; /* 确保 z-index 高于遮罩层 */
}
相关推荐
CarIise22 分钟前
下拉菜单HTML/CSS/JS实现
前端·css
2601_9620715732 分钟前
Java进阶(vue基础)
前端·javascript·vue.js
研☆香32 分钟前
数组方法 splice讲解 拓展
开发语言·前端·javascript
码视野33 分钟前
基于 Spring Boot + Vue3 的【城市地下燃气管网微泄漏感知与相邻地下空间燃爆预警中台】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端
淡海水36 分钟前
05-03-栈队列-PriorityQueue-TElement-TPriority-NET6优先队列语义与四叉堆实现
服务器·前端·c#·priorityqueue·clr·telement
ITresearchGuest1 小时前
LangChain JS 入门:快速搭建前端 AI 开发环境
前端·javascript·langchain
YHHLAI1 小时前
React + TypeScript 实战:从零构建颜色选择器应用
前端·react.js·typescript
Profile排查笔记1 小时前
指纹浏览器手机版怎么选?从本地 App 到云端 Android 的实现方式解析
前端·人工智能·后端·自动化
浪兎兎2 小时前
Vue CLI笔记
前端·vue.js·笔记
Csvn2 小时前
Proxy / Reflect 与响应式原理:完整手写一个 mini Vue3 响应式系统
前端