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 高于遮罩层 */
}
相关推荐
用户57573033462412 分钟前
从 LocalStorage 待办清单到 CSS 核心机制:一次搞懂数据持久化、继承与盒模型陷阱
前端
codingWhat18 分钟前
前端组件库开发实践:从零到发布
前端·npm·vite
cxxcode23 分钟前
浏览器模块加载与 Webpack 打包原理
前端
兆子龙24 分钟前
React Compiler 来了:少写 useMemo,照样稳
前端·架构
用户54330814419425 分钟前
Manifest V3 实战:从补天网站逆向到 Chrome 扩展开发全记录
前端·后端
zhqiok28 分钟前
React中类似于Vue中Pinia的轻量级状态管理神器——Zustand
前端
Mintopia31 分钟前
促成高端技术方案形成的关键要素与实践路径
前端
摸鱼的春哥2 小时前
春哥的Agent通关秘籍13:实现RAG查询
前端·javascript·后端
明月_清风2 小时前
滚动锁定:用户向上翻看历史时,如何阻止 AI 新消息把它“顶”下去?
前端·javascript
明月_清风2 小时前
当高阶函数遇到 AI:如何自动化生成业务层面的逻辑拦截器
前端·javascript·函数式编程