问题说明
ruoyi的前端提供的字典样式只有默认的那几个蓝色,红色,但我们的车牌颜色有各种颜色,因此需要自定义字典的回显方案
解决方案
表单
增加class="custom-dict-tag"防止影响其他的字典
<el-table-column label="车牌颜色,0-蓝色;1-绿色;2-黑色;3-黄色;4-其他" align="center" prop="plateColor" >
<template slot-scope="scope">
<dict-tag class="custom-dict-tag"
:options="dict.type.plate_color"
:value="scope.row.plateColor"
:style="getTagStyle(scope.row.plateColor)"
/>
</template>
</el-table-column>
自定义方法
getTagStyle(plateColor) {
let color;
switch (plateColor) {
case "0":
color = '#0000FF'; // 蓝色
break;
case "1":
color = '#008000'; // 绿色
break;
case "2":
color = '#000000'; // 黑色
break;
case "3":
color = '#FFFF00'; // 黄色
break;
default:
color = '#808080'; // 其他
}
return {
'--custom-background-color': color,
'--custom-color': '#FFFFFF'
};
}
强制样式
字典生成的样式是div >span 所以需要::v-deep深度选择
<style scoped>
.custom-dict-tag ::v-deep .el-tag {
background-color: var(--custom-background-color) !important;
color: var(--custom-color) !important;
}
.custom-dict-tag ::v-deep .el-tag--light {
background-color: var(--custom-background-color) !important;
color: var(--custom-color) !important;
}
.custom-dict-tag ::v-deep .el-tag:hover {
background-color: var(--custom-background-color) !important;
color: var(--custom-color) !important;
opacity: 1 !important; /* 确保 hover 时透明度不变 */
}
</style>
::v-deep解释说明
- ::v-deep
作用:::v-deep 是 Vue 中的深度选择器,用于深度作用到子组件的内部元素。它可以使样式规则应用到当前组件内的所有后代元素,不论它们位于组件的哪个层级
。
背景:在 Vue 2 中,常用的深度选择器是 /deep/ 或 >>>。在 Vue 3 中,这些选择器被 ::v-deep 取代。 - .el-tag
作用:.el-tag 是 Element UI 中 el-tag 组件的类选择器,表示样式规则将应用于所有具有 el-tag 类的元素
。 - background-color: var(–custom-background-color) !important;
作用:将 el-tag 组件的背景颜色设置为 CSS 自定义属性 --custom-background-color 的值。
var(–custom-background-color):使用 CSS 变量 --custom-background-color 的值。这些变量是在父级元素或通过 JavaScript 动态设置的。
!important:强制应用此样式,即使有更高优先级的样式规则也会被覆盖。
- color: var(–custom-color) !important;
作用:将 el-tag 组件的文本颜色设置为 CSS 自定义属性 --custom-color 的值。
var(–custom-color):使用 CSS 变量 --custom-color 的值。
!important:强制应用此样式,即使有更高优先级的样式规则也会被覆盖。
总结:这段代码的目的是确保在当前组件中,所有 el-tag 组件的背景颜色和文本颜色都使用 CSS 自定义属性 --custom-background-color 和 --custom-color 的值,并使用 !important 来覆盖任何默认样式或其他更高优先级的样式。这通过使用 ::v-
deep 深度选择器,可以确保这些样式即使在深层嵌套的子组件中也能生效。
最后发现ruoyi的字典提供了自定义样式选项,乌龙了哈哈哈哈,就当学习一下吧