若依vue（前后端分离版本）前端使用字典

开发环境

• IDEA软件
• 前端 vue2 + element ui

  准备工作

  1、启动若依系统前后端

  2、使用默认账号，超级管理员账户进入系统

  3、进入字典管理

  添加自己需要的字典和字典数据（标签和键值），这里我的是，名称和类型由自己取名，类型使用英文加下划线，在后面前端代码中需要使用类型。

  切换到开发工具IDEA

  在需要使用字典的页面中，一般使用字典分为下拉框和数据列表展示

  1、下拉框

  1）、样式代码

  2)、js代码

  在export default内容中，一定要添加如下属性

  export default {
  //数组中为你的字典类型，多个在[]中用逗号分隔如dicts:['a_b','b_c']
    dicts:['transport_order_status'],//一定要用dicts命名属性
  data(){},
  methods:{}
  }

   效果如图

  2、数据列表 

  1）、样式代码

  在dict-tag标签中

  options属性dict.type.{你在字典管理页面中添加的字典类型}

  value属性绑定对应的键值，从我这个项目中说是从后端拿到的数据，在数据库中存储的是state字段，值为1、2、3这个值对应的字典标签就通过dict-tag标签展示

  2）、js代码

  在export default内容中，一定要添加如下属性

  export default {
  //数组中为你的字典类型，多个在[]中用逗号分隔如dicts:['a_b','b_c']
    dicts:['transport_order_status'],//一定要用dicts命名属性
  data(){},
  methods:{}
  }

  效果如图