vue路由跳转后页面el-table样式失效

syx_cainiao

于 2020-12-15 09:19:07 发布

阅读量1.4k

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/syx_cainiao/article/details/111044445

版权

在进行Vue路由跳转后，主页面的el-table样式出现失效现象，仅通过刷新能恢复正常。问题源于后台管理列表页面组件添加的全局样式。通过使用`scoped`属性实现组件样式私有化，避免全局污染。添加`scoped`后，配合深度选择器 `/deep/` 或 `>>>` 解决el-table样式失效的问题，确保样式仅在当前组件生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在写一个系统主页面跳转到后台管理列表页面后再次跳转回主页面，主页面所有的el-table样式失效，刷新后样式回复正常。且多次操作等会发生这样的问题。
后来是发现后台管理列表页面组件中<style>中添加了全局样式，没有加scoped

<styel scoped>...<style>

添加之后就不会有这样的问题了

scoped可以实现组件的私有化，不对全局样式造成污染

原理：

给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性
在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式

当前端的style只属于当前组件，不受其他组件干预！

<style scoped>
	.el-table::before {
   //去掉最下面的那一条线
            height: 0px;
    }
</st

最低0.47元/天解锁文章