首页 > 其他分享 >ruoyi~为字典回显添加自定义样式

ruoyi~为字典回显添加自定义样式

时间:2023-10-19 16:46:59浏览次数:33  
标签:src vue 自定义 回显 ruoyi value label 字典

ruoyi框架的vue版本中,对字典的回显样式的设计,默认有以下几种

如果希望添加一种红色字体的,可以这样实现,实现后你的回显就多了一种红色字体的样式了

具体实现的方法

  1. 在app.vue中,添加对象的css样式
<style type="text/css">
.el-tag--redColorFont {
  color: #ff0000;
  background: none;
  font-size: 14px;
  display: inline-block;
  border: none;
}
</style>
  1. 在src/view/system/dict/data.vue文件中,添加对应的标签
listClassOptions: [
  {
    value: "default",
    label: "默认"
  },
  {
    value: "primary",
    label: "主要"
  },
  {
    value: "success",
    label: "成功"
  },
  {
    value: "info",
    label: "信息"
  },
  {
    value: "warning",
    label: "警告"
  },
  {
    value: "danger",
    label: "危险"
  },
  {
    value: "redColorFont",
    label: "红字"
  }
],
  1. 定义好了之后,我们的列表页引用了字典的元素,就发生变化了
<el-table-column align="center" label="前台状态" prop="displayStatus" width="80">
  <template slot-scope="scope">
    <dict-tag :options="dict.type.lawyer_display_status" :value="scope.row.displayStatus"/>
  </template>
</el-table-column>

总结

ruoyi-vue在字典设计上还是非常巧妙的,通过封装组件和插件,完成了字典元素的自动渲染,感兴趣可参它的源代码。

  • src/utils/dict
  • src/components/DictData
  • src/components/DictTag

标签:src,vue,自定义,回显,ruoyi,value,label,字典
From: https://www.cnblogs.com/lori/p/17775074.html

相关文章

  • Day18_有参装饰器_迭代器_可迭代对象___iter__()方法__next__()方法_for循环原理_自定
    1.Day17复习无参装饰器模版: 2.Day17复习装饰器的补充: 3.有参函数的知识储备: 4.有参装饰器不用语法糖,使用套用的方式从数据源取数据: 5.有参装饰器不用语法糖,使用套用的方式二从数据源取数据: 6.有参装饰器语法糖: 7.有参装饰器模板: 8.迭代器的介绍和为何存在迭......
  • 配置自定义服务为linux系统服务
    背景使用go语言写了一个测试环境部署上报的备份服务,以防因为主服务挂了影响部署操作。 想把这个backup服务设置了系统服务,如果因环境重启等异常,可以自动重启使用的环境的Centos71、首先需要创建一个systemdunit存储配置文件[Unit]Description=deployreportbackupse......
  • 【JDK】自定义注释处理程序插件 AbstractProcessor
    1 前言最近比较好奇,Lombok、MapStruct里的注解,会在打包的时候会给我们的字节码文件里,写入一些东西甚至生成一些转换的字节码文件,不知道人家是如何做到的,所以抽空看了看,自己写了一个小Demo,来体验下。我们的目标就是引入自己的 AbstractProcessor的maven依赖包,然后能给我们生......
  • 【问题记录】自定义注解处理程序 AbstractProcessor,就是不生效,执行没效果
    1  前言最近在看注解处理程序,也想打包的时候,生成一点自己的东西,写了一个 AbstractProcessor,奶奶的花了两个早上,一直想不明白为什么不生效:唉,仅记录哈。......
  • 用户控件和自定义控件
    用户控件和自定义控件的不同点在XAML中构成用户控件的样子。子控件需要暴露的依赖属性有2种用途:1.显示2.赋值3.事件。如何暴露属性?将2种需要暴露的依赖属性定义成用户控件的新增的自定义依赖属性。TextBoxText=Binding,子控件Text用户控件被赋值,文本框变,文本框变......
  • 初学Bokeh:自定义标题【12】跬步
    初学Bokeh:自定义标题【12】跬步大多数绘图都包含标题(headline)。可以通过向figure()函数传递标题参数来为图像添加标题:p=figure(title="Headlineexample")标题文本有多种样式,示例如下:frombokeh.plottingimportfigure,show#preparesomedata#定义绘图数据x......
  • 将自定义的日志直接写入到 mysql 数据库
    将日志直接写入到MySQL数据库中可能会对性能产生影响。如果需要高性能的日志记录解决方案,则可以考虑使用专门的日志记录器,例如Elasticsearch、Logstash和Kibana(ELK)堆栈。安装MySQL数据库,并创建一个新的数据库和表来存储日志数据。使用MySQL连接器来连接到MySQL数据库。创建一个包含......
  • cesium 自定义属性方法
    Cesium.Cesium3DTileset.prototype.setObjsColor=function(ids){letcurrentStyle=this.style&&this.style.style||{};this.style=newCesium.Cesium3DTileStyle({...currentStyle,color:{evaluateColor:function(......
  • 视频直播app源码,自定义View 线型EditText输入框
    视频直播app源码,自定义View线型EditText输入框publicclassLineEditTextextendsAppCompatEditText{  privatePaintmPaint;   /**   *@paramcontext   *@paramattrs   */  publicLineEditText(Contextcontext,AttributeSetattrs){ ......
  • 企业如何自定义人力资源和财务报表?
    企业自定义人力资源和财务报表是一种重要的能力,它允许企业根据其特定需求和目标创建和定制报表。以下是一些详细的步骤和说明,帮助企业实现人力资源和财务报表的自定义。1.确定报表需求:首先,企业需要明确自己对人力资源和财务报表的具体需求。这可能涉及到不同层级和部门的数据......