jeecgboot数据字典使用

input页面下拉框使用

效果展示
在这里插入图片描述
实现

  1. 定义数据字典
    在这里插入图片描述
  2. 引用并调用JDictSelectTag组件
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
export default {
 	....
     components: {
       JDate,
       CustomerModal,
       JDictSelectTag
     },
     ...
}
<j-dict-select-tag :triggerChange="true" v-model="queryParam.type1Id" placeholder="请选择类型" dictCode="customer_type"/>

dictCode为数据字典中定义的code。

list页面显示 数据字典

效果展示
处理前
在这里插入图片描述
处理后
在这里插入图片描述
实现

  1. 实体类添加注解
@Dict(dicCode = "customer_type")
private String type1Id;

dicCode为数据字典中定义的code。
2. 修改table column定义

{
  title:'类型',
   align:"center",
   dataIndex: 'type1Id_dictText',
 },

dataIndex值为字段名+"_dictText"
修改后也可以在vue中查看数据源。
在这里插入图片描述

list页面显示 表关联

效果展示
处理前
在这里插入图片描述
处理后
在这里插入图片描述
实现

  1. 实体类添加注解
@Dict(dicCode = "id",dictTable = "sys_user",dicText = "realname")
private String managerId;
dicCode为关联表的组件
dictTable为关联表
dicText 为需要显示的内容
  1. 修改table column定义
{
  title:'负责人',
   align:"center",
   dataIndex: 'managerId_dictText'
 },

dataIndex值为字段名+"_dictText",和数据字典的一致。

Logo

前往低代码交流专区

更多推荐