建设网站门户百度网络优化

一、问题描述

在vue项目中使用:class={tableContent: summary}给元素动态添加了类名tableContent，运行代码后查看类名已经添加成功但样式并未生效。

二、问题产生原因并解决

• 刚开始把样式写在了<style lang="scss" scoped></style>中，使用了::v-deep但并没有解决问题，以下代码不生效

::v-deep .tableContent {.el-table--scrollable-x .el-table__body-wrapper {padding-bottom: 0px !important;}
}

• 解决办法：在vue文件中重新添加一个style标签，或者更改::v-deep的位置

// 写在原来带有scoped的style标签
.tableContent {::v-deep {.el-table--scrollable-x .el-table__body-wrapper {padding-bottom: 0px !important;}}
}
// 重新添加一个style标签，这个标签用于全局并且lang与之前标签不同
<style lang="css">
.tableContent .el-table--scrollable-x .el-table__body-wrapper {padding-bottom: 0px !important;
}
</style>