vue3 Element-plus修改内置样式复现代码

        笔者在修改Element-plus的内置样式时，遇到一点挫折，现提供需求场景与解决方案。

一、实现（1）透明弹窗可拖拽，且不影响点击弹窗外内容；（2）弹窗内置表格，表格需修改样式颜色，且鼠标放置在某一行时改变该行样式。

        vue3中的模板：定义一个点击弹窗按钮，弹出弹窗内容；定义一个其它按钮，显示不影响点击弹窗外内容的功能。

<template><div><el-button type="primary" @click="dialogVisible = !dialogVisible">点击弹窗</el-button><el-button type="primary" @click="qita">其它</el-button><div><el-dialogv-model="dialogVisible"title="可拖拽对话框":close-on-click-modal="false":close-on-press-escape="false"draggable:modal="false"@close="handleClose":before-close="preventClose"><div><el-table :data="tableData" border style="width: 100%;text-align: center"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></div></el-dialog></div></div>
</template>

        vue3中setup代码，主要是阻止对话框的关闭，以及对页面的穿透，实现可点击弹窗外内容的功能。

<script setup>import { onMounted, ref } from 'vue';let dialogVisible = ref(false);const preventClose = (done) => {done(false); // 阻止对话框关闭};const handleClose = () => {console.log('对话框关闭');};onMounted(() => {var box = document.querySelector(".el-overlay-dialog");// 获取.el-overlay-dialog父级var boxa = box.parentNode;// 使用pointerEvents 进行页面穿透boxa.style.pointerEvents = 'none';});let qita = () =>{alert("其它")}const tableData = ref([{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},])
</script>

        最重要的内置样式修改，更改弹窗样式，更改表格样式。

<style scoped lang="less">
/* 实现弹窗可拖拽、消除遮罩层 */
:deep(.el-dialog) {position: absolute;z-index: 2000 !important;pointer-events: auto !important;background: rgba(0, 0, 0, 0.2) !important;
}
:deep(.pointer){pointer-events: auto !important;
}
/* 更改弹窗样式 */
:deep(.el-dialog__title) {font-weight: 900;
}
:deep(.el-dialog__header){color: #fff;background: rgba(197, 92, 92, 0.5);text-align: center;
}
:deep(.el-dialog__body){padding: 20px;color: #fff;background: rgba(0, 0, 0, 0.5);text-align: left;
}
/* 更改表格样式 */
.el-table {--el-table-border-color: #888888;--el-table-text-color: white;--el-table-header-text-color: white;--el-table-row-hover-bg-color: transparent;--el-table-current-row-bg-color: transparent;--el-table-header-bg-color: transparent;--el-table-bg-color: transparent;--el-table-tr-bg-color: transparent;--el-table-expanded-cell-bg-color: transparent;@media (prefers-color-scheme: light) {--el-table-text-color: #ffffff;--el-table-header-text-color: #ffffff;}
}
:deep(.el-table__header-wrapper) {background: #e2a8a8;opacity: 0.7;
}
:deep(.el-table__body-wrapper) {background: #b09d9d;opacity: 0.7;
}
/* 表格内容居中 */
:deep(.el-table .cell){text-align: center;
}
/* 新增悬停高亮样式 */
:deep(.el-table__body tr:hover > td) {background: rgb(57, 116, 185) !important;cursor: pointer;
}
</style>

        最后，附上运行效果图：

参考提供思路的博客：ElementUI中table里header-row-style设置背景颜色不生效解决方法_rowstyle背景颜色不生效-CSDN博客https://blog.csdn.net/weixin_46533954/article/details/119912772

el-dialog背景色、文字颜色修改以及最终实现效果_el-dialog title颜色-CSDN博客https://blog.csdn.net/weixin_70027586/article/details/128900985

二、待

待