Java-ElementUi中的row-class-name使用

Java-ElementUi中的row-class-name

ElementUi中table组件中的row-class-name属性用户动态条件设置行样式。

:row-class-name="classMothed" 	//classMothed为方法名

表格el-table中添加

row-class-name=“classMothed”

<el-table  v-loading="loading"  :row-class-name="classMothed">#####具体内容#######</el-table>

methods方法中编写classMothed方法

rowName ({row, column, rowIndex, columnIndex}) {
  if (row.flag =='-1') {
    return 'red';
  } else {
    return 'white';
  }
},

编写CSS样式

<style scoped>
   /deep/ .el-table .red {
      background: red !important;
      color: black
   }
   /deep/ .el-table .white {
      background: white !important;
      color: black
   }
</style>

在vue组件中的style标签上，有一个特殊的属性：scoped。

当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。

注意：实际开发中，建议在每个组件的 style 身上都加上 scoped 属性。

注：

有以下几个可能的原因导致 :row-class-name 失效：

• 代码错误：检查代码是否正确编写了正确的类名和语法。确保在 row-class-name 属性中引用的类名是正确的，没有拼写错误，并且在样式文件中定义了该类名的样式。
• 样式文件未被引用：确保样式文件被正确地引用到 HTML 文件中。检查样式文件的路径是否正确，并且确认样式文件中包含了正确的类名和样式定义。
• 权重问题：如果在样式文件中定义了与 row-class-name 相同的类名，并且该样式具有更高的权重，则 row-class-name 属性定义的样式会被覆盖。检查样式文件中是否存在与 row-class-name 相同的类名，并根据需要调整权重。
• 样式冲突：如果在样式文件中存在与 row-class-name 相同的类名，并且这两个样式具有不同的属性或值，则可能会导致样式冲突。检查样式文件中是否存在与 row-class-name 相同的类名，并确保这两个样式定义是一致的或者进行适当的调整。
• 框架或库冲突：如果在使用的框架或库中存在与 row-class-name 相关的样式或类名，并且这些样式与您的样式冲突，则可能会导致 row-class-name 失效。检查使用的框架或库是否存在与 row-class-name 相关的样式或类名，并根据需要进行适当的调整或解决冲突。
• 缓存问题：有时候浏览器会缓存样式文件，导致页面上的样式未能正确加载。尝试清除浏览器缓存或使用无缓存模式重新加载页面，查看是否能够解决问题。

通过逐一排查以上可能的原因，您应该能够找到导致 :row-class-name 失效的具体原因，并进行相应的修复。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论