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 高于遮罩层 */
}
相关推荐
hoLzwEge9 分钟前
node-linker VS shamefully-hoist
前端·前端框架
袋鱼不重15 分钟前
解决 Web 端图片预览与下载颜色不一致的一种工程方案
前端·后端
风止何安啊21 分钟前
教你用 JS + AI 实现简单的爬虫,零门槛爬取网页信息
前端
cidy_9822 分钟前
codebase-memory-mcp 新手完全教程:让 AI 真正「理解」你的代码库
前端
牛奶29 分钟前
HTTPS你不知道的事
前端·https·浏览器
小小小小宇31 分钟前
前端 Vue 如何避免不必要的子组件渲染全解析
前端
cidy_981 小时前
codebase-memory-mcp 安装教程
前端
mt_z1 小时前
Webpack 与 Vite 完全指南
前端
灏仟亿前端技术团队1 小时前
B 端多弹窗越来越难维护?试试把弹窗交互 Promise 化
前端
奇奇怪怪的1 小时前
向量数据库选型与生产级实战
前端