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 高于遮罩层 */
}
相关推荐
vivo互联网技术5 小时前
域名埋点零侵入实时校验实践:基于代理转发与规则驱动的工具设计
前端·测试·监控·代理·埋点
喵个咪5 小时前
GoWind ShortPlay 拆解:Flutter 沉浸式 Feed 的播放器工程——生命周期、手势状态机与游客降级
前端·flutter·架构
白日做梦Q5 小时前
Chrome商店访问不了,无法现在安装插件?利用Edge商店迁移扩展完整实操教程问题背景
前端·chrome·edge
涛涛ing5 小时前
2026年,你的前端终于不用再“算随机数”和“量高度”了
前端
用户298698530145 小时前
React 前端 Word 转图片:页面与元素级导出的工程实践
前端·javascript·react.js
彭亚川Allen5 小时前
从零手搓 RAG 之分块策略
前端·后端·面试
迷途小羔羊5 小时前
环境搭建
前端·javascript·后端
夕阳_醉了5 小时前
让 AI 回答“打字般”浮现:用 Vue 3 + DeepSeek 实现流式聊天
前端·vue.js·人工智能
SabrinaW7116 小时前
基于 C++17 与 RTTR 的注册式对象工厂:配置驱动的动态对象创建
java·前端·数据库