vue若依框架dicts中字典项的使用：表格展示与下拉框示例 ...

在若依框架的开辟中，字典项的使用可以帮助我们更方便地管理和展示一些具有固定取值范围的数据，比如颜色类型、人员类型等。下面将详细先容若依框架中字典项在表格和下拉框中的使用方法。
1. 若依字典项的设置

在若依框架中，我们首先必要在系统管理 - 字典管理中设置所需的字典。假设我们要设置两个字典：颜色（color）和人员类型（personnel_type）。详细设置如下：
颜色字典（color）

字典标签字典值红色1蓝色2绿色3 人员类型字典（personnel_type）

字典标签字典值管理员1平凡用户2访客3 2. 在页面中引入字典

在 Vue 组件中，我们可以通过 dicts 属性引入必要使用的字典。示例代码如下：

1. <template>
2.   <div>
3.     <!-- 表格部分 -->
4.     <el-table :data="tableData" style="width: 100%">
5.       <el-table-column
6.         :label="$t('h.ProductionColor')"
7.         align="center"
8.         prop="color"
9.       >
10.         <template slot-scope="scope">
11.           <dict-tag :options="dict.type.color" :value="scope.row.color">
12.           </dict-tag>
13.         </template>
14.       </el-table-column>
15.       <el-table-column
16.         :label="$t('h.personnelType')"
17.         align="center"
18.         prop="userType"
19.       >
20.         <template slot-scope="scope">
21.           <dict-tag :options="dict.type.personnel_type" :value="scope.row.userType">
22.           </dict-tag>
23.         </template>
24.       </el-table-column>
25.     </el-table>
27.     <!-- 下拉框部分 -->
28.     <el-form :model="formData" ref="formDataRef" label-width="120px">
29.       <el-form-item label="选择颜色">
30.         <el-select v-model="formData.color" placeholder="请选择颜色">
31.           <el-option
32.             v-for="item in dict.type.color"
33.             :key="item.dictValue"
34.             :label="item.dictLabel"
35.             :value="item.dictValue"
36.           >
37.           </el-option>
38.         </el-select>
39.       </el-form-item>
40.       <el-form-item label="选择人员类型">
41.         <el-select v-model="formData.userType" placeholder="请选择人员类型">
42.           <el-option
43.             v-for="item in dict.type.personnel_type"
44.             :key="item.dictValue"
45.             :label="item.dictLabel"
46.             :value="item.dictValue"
47.           >
48.           </el-option>
49.         </el-select>
50.       </el-form-item>
51.     </el-form>
52.   </div>
53. </template>
55. <script>
56. export default {
57.   data() {
58.     return {
59.       tableData: [
60.         { color: "1", userType: "2" },
61.         { color: "2", userType: "1" }
62.       ],
63.       formData: {
64.         color: "",
65.         userType: ""
66.       },
67.       dicts: ["color", "personnel_type"]
68.     };
69.   },
70.   computed: {
71.     dict() {
72.       return this.$store.state.dict;
73.     }
74.   }
75. };
76. </script>

复制代码

表格部门

在表格中，我们使用 dict-tag 组件来展示字典项。dict-tag 组件接收两个主要参数：

• options：字典项的列表，通过 dict.type.color 或 dict.type.personnel_type 获取。
  
• value：当前行数据对应的字典值，通过 scope.row.color 或 scope.row.userType 获取。
  

下拉框部门

在下拉框中，我们使用 el-select 和 el-option 组件来实现选择功能。通过 v-for 指令遍历字典项列表，将每个字典项的 dictLabel 作为表现标签，dictValue 作为实际值。
数据获取

通过 computed 属性 dict 从 Vuex 中获取字典数据，确保在组件中可以方便地使用字典项。

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