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 高于遮罩层 */
}