四、vue组件中使用elementUI样式(row-class-name)无效问题

问题描述

vue项目中，需要给vue表格中的每一行加入自定义的样式，根据文档给组件加上row-class-name属性即可，直接加入该属性并且在当前vue组件中配置对应class发现样式并没有生效。
解决方案

1.使用全局属性

在elementUI中，row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效。因为之前的代码都是在组件中编写的，所以去除<style scoped></style>中的scoped即可该组件中的样式变为全局属性。

当然这样做有个缺陷，很容易引起因为样式重复定义导致意外错误，所以更推荐第二种解决方案。

2.组件中使用scoped限定样式作用域，需要用到全局属性时使用@import语法引用进来，示例代码如下：

src/styles/css/common.css

.el-table .success-row {
    background: rgb(223, 71, 11)
}

使用

<style lang="stylus" scoped>
@import "~styles/css/common.css"
    .searchContainer
        width 100%
        display flex
        justify-content center
    .table-container
        margin-top 20px
</style>

备注：因为在vue.config.js中设置了路径别名 .set('styles', resolve('src/assets/styles')) ，所以无需再写全路径，直接写 ~styles/css/common.css 即可