1. input页面下拉框使用

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

2. list页面显示 数据字典

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

  • 实现

  1. 实体类添加注解
    @Dict(dicCode = "customer_type")
    private String type1Id;
    
    dicCode为数据字典中定义的code
  2. 修改table column定义
    {
      title:'类型',
       align:"center",
       dataIndex: 'type1Id_dictText',
     },
    
    dataIndex值为字段名+"_dictText"
    修改后也可以在vue中查看数据源
    在这里插入图片描述

3. list页面显示 表关联

  • 效果展示
    处理前
    在这里插入图片描述
    处理后
    在这里插入图片描述
  • 实现
  1. 实体类添加注解
    @Dict(dicCode = "id",dictTable = "sys_user",dicText = "realname")
    private String managerId;
    
    dicCode为关联表的组件
    dictTable为关联表
    dicText 为需要显示的内容
  2. 修改table column定义
    {
      title:'负责人',
       align:"center",
       dataIndex: 'managerId_dictText'
     },
    
    dataIndex值为字段名+"_dictText",和数据字典的一致。
Logo

前往低代码交流专区

更多推荐