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 高于遮罩层 */
}
相关推荐
3Katrina4 分钟前
RAG技术全拆解:让大模型告别“瞎编”,秒变靠谱助手
前端
a1117768 分钟前
堆叠式流程图编辑器(html 开源)
开发语言·前端·javascript·开源·编辑器·html·流程图
墨渊君9 分钟前
前端工程化进阶:Monorepos 架构简析(水文)
前端
兆子龙9 分钟前
前端必学:完美组件封装的 7 个原则
前端·javascript
兆子龙10 分钟前
React 性能坑:别让 AI 踩了,快来添加 rule 吧
前端·javascript
光影少年11 分钟前
Vue的生命周期有哪些及执行机制?
前端·vue.js·掘金·金石计划
来碗疙瘩汤13 分钟前
Vue 事件绑定完全指南:官方文档未详述的事件大全
前端·javascript·vue.js
天涯学馆13 分钟前
从 V8 引擎看 JS 代码是如何一步步变成机器指令的
前端·javascript·面试
Elaine33614 分钟前
【通过 Vue 实例劫持突破 Web 编辑器的粘贴限制】
前端·javascript·vue.js·chrome devtools·前端逆向
哔哩哔哩技术14 分钟前
从“截图大法”到真实交互:B站专栏视频卡的技术革命
前端