ToB企服应用市场:ToB评测及商务社交产业平台

标题: 若依vue（前后端分离版本）前端使用字典 [打印本页]
作者: 王海鱼    时间: 2024-6-11 09:46
标题: 若依vue（前后端分离版本）前端使用字典
开发情况


预备工作

1、启动若依系统前后端
2、使用默认账号，超级管理员账户进入系统
3、进入字典管理
添加自己需要的字典和字典数据（标签和键值），这里我的是，名称和类型由自己取名，类型使用英文加下划线，在反面前端代码中需要使用类型。


切换到开发工具IDEA

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

1）、样式代码
  1. <el-select>
  2.         <el-option v-for="dict in dict.type.transport_order_status"
  3.                    :key="dict.value"
  4.                    :label="dict.label"
  5.                    :value="dict.value"
  6.         ></el-option>
  7.       </el-select>
复制代码
2)、js代码
在export default内容中，肯定要添加如下属性
  1. export default {
  2. //数组中为你的字典类型，多个在[]中用逗号分隔如dicts:['a_b','b_c']
  3.   dicts:['transport_order_status'],//一定要用dicts命名属性
  4. data(){},
  5. methods:{}
  6. }
复制代码
 效果如图


2、数据列表 

1）、样式代码
在dict-tag标签中
options属性dict.type.{你在字典管理页面中添加的字典类型}
value属性绑定对应的键值，从我这个项目中说是从后端拿到的数据，在数据库中存储的是state字段，值为1、2、3这个值对应的字典标签就通过dict-tag标签展示
  1. <el-table-column label="订单状态" align="center" prop="state" >
  2.         <template slot-scope="scope">
  3.           <dict-tag :options="dict.type.transport_order_status" :value="scope.row.state"></dict-tag>
  4.         </template>
  5.       </el-table-column>
复制代码
2）、js代码
在export default内容中，肯定要添加如下属性
  1. export default {
  2. //数组中为你的字典类型，多个在[]中用逗号分隔如dicts:['a_b','b_c']
  3.   dicts:['transport_order_status'],//一定要用dicts命名属性
  4. data(){},
  5. methods:{}
  6. }
复制代码
效果如图




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4