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 高于遮罩层 */
}
相关推荐
前端大卫17 分钟前
H5 渲染 PDF 并添加高亮的两种方案【附源码】
前端
因_崔斯汀1 小时前
用 AI 生成 Three.js 沉浸式网站,代码与 Skill 均已开源
前端·人工智能
葡萄城技术团队2 小时前
一键触发工作表中所有异步函数:用依赖单元格刷新 SpreadJS 公式
前端
Bigger2 小时前
谁动了我的 URL?——记一次微前端"灵异 Bug"的排查实录
前端·ai编程·vue-router
JavaGuide2 小时前
轻量开源版 IDEA 来了!
前端·后端
张洪权2 小时前
nest.js websocket 群聊----私聊功能
前端·nestjs
流光D2 小时前
AI Era: Building Web Sites and Configuring Nginx Reverse Proxy Process
前端·人工智能·nginx
sakidd2 小时前
VS Code 的 AI Chat 现在已经这么能干了?
前端
计算机魔术师2 小时前
英伟达砸130亿美元买下一个平台,黄仁勋到底在怕什么?
前端
leoZ2312 小时前
第 2 篇:搭建地基——Vue3 + Vite + Tailwind v4 + shadcn-vue
前端·javascript·vue.js·人工智能·目标检测·数据挖掘·语音识别