当前位置：首页 > article >正文

vue项目中动态添加类名样式不生效问题

article 2025/2/28 0:22:14

一、问题描述

在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>