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 高于遮罩层 */
}
相关推荐
井川不擦7 分钟前
前端安全通信方案:RSA + AES 混合加密
前端
孜孜不倦不忘初心9 分钟前
Ant Design Vue 表格组件空数据统一处理 踩坑
前端·vue.js·ant design
AD_wjk9 分钟前
Android13系统集成方案
前端
Joyee69110 分钟前
RN 的新通信模型 JSI
前端·react native
somebody10 分钟前
零经验学 react 的第6天 - 循环渲染和条件渲染
前端
青晚舟12 分钟前
AI 时代前端还要学 Docker & K8s 吗?我用一次真实部署经历说清楚
前端·github
墨鱼笔记14 分钟前
不使用微前端:如何实现主应用和子模块动态管理与通信实现
前端
兆子龙23 分钟前
前端工程师转型 AI Agent 工程师:后端能力补全指南
前端·javascript
长安110825 分钟前
web后端----HTTP协议与浏览器F12
前端·网络协议·http
前端大波1 小时前
Web Vitals 与前端性能监控实战
前端·javascript