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 高于遮罩层 */
}
相关推荐
何以解忧,唯有..6 小时前
Vue 3 模板语法详解:从插值到指令的完整指南
前端·javascript·vue.js
invicinble7 小时前
【无标题】
前端
EasyGBS7 小时前
从接入到稳定播放:无插件直播H5视频流媒体播放器EasyPlayer.js如何撑起Web端流媒体
开发语言·前端·javascript
不可能片场7 小时前
nohup 之后进程还是死了:GUI 子进程的存活陷阱
前端·electron
名为沙丁鱼的猫7297 小时前
React/JSX 编码规范
前端·javascript·react.js
是吕先森7 小时前
【python】selenium实现web自动化测试
前端·python·selenium
Highcharts.js7 小时前
甘特图纵向任务、横向时间显示图表可视化开发|Highcharts甘特图示例
开发语言·前端·javascript·可视化·甘特图·数据可视化·highcharts
yume_sibai7 小时前
Element Plus 导航与反馈组件完全指南(15个核心组件)
前端·elementui·交互
可乐鸡翅yeah_8 小时前
hls.js 多实例并发踩坑,多视频页面播放器内存与冲突问题解决
开发语言·前端·javascript·音视频·hls·m3u8·m3u8在线播放
涛涛ing8 小时前
你的页面为什么总是卡成PPT?2026年,90%的前端都忽略了主线程
前端