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

最新推荐文章于 2025-03-20 12:58:56 发布

mind_me

最新推荐文章于 2025-03-20 12:58:56 发布

阅读量3.5k

点赞数 11

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/mind_me/article/details/136920239

版权

本文介绍了如何在使用IDEA作为开发工具的Vue2项目中，通过ElementUI实现字典管理，包括在下拉框中的应用以及数据列表展示，详细步骤涉及样式和JavaScript代码的编写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发环境

IDEA软件
前端 vue2 + element ui

准备工作

1、启动若依系统前后端

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

3、进入字典管理

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

切换到开发工具IDEA

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

1、下拉框

1）、样式代码

 <el-select>
        <el-option v-for="dict in dict.type.transport_order_status"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
        ></el-option>
      </el-select>

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标签展示

 <el-table-column label="订单状态" align="center" prop="state" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.transport_order_status" :value="scope.row.state"></dict-tag>
        </template>
      </el-table-column>

2）、js代码

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

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