# JDictSelectTag字典標簽 > 針對字典的使用，目前提供了一個標簽實現下拉和radio組件。 > JDictSelectTag 標簽： 用于表單的標簽使用，比如通過性別字典編碼：sex，可以直接渲染出下拉組件。 > JDictSelectUtil.js函數： 用于列表數據展示，針對列表字段字典值替換成字典文本，進行展示（可以作廢了，建議@Dict注解進行翻譯） > @Dict用法 > 字典翻譯注解@Dict，用于列表字段字典翻譯（比如字段sex存的值是1，會自動生成一個翻譯字段 sex_dictText 值是‘男’）。詳細文檔：http://jeecg-boot.mydoc.io/?t=345678 ## JDictSelectTag 字典標簽用法 ---- ### 示例： v-model用法 ``` <j-dict-select-tag v-model="queryParam.sex" placeholder="請輸入用戶性別" dictCode="sex"/> ``` ### 示例：v-decorator用法 > 注意得加參數 :triggerChange="true"，不然賦值不成功 ```html <j-dict-select-tag v-decorator="['sex', {}]" :triggerChange="true" placeholder="請輸入用戶性別" dictCode="sex"/> ``` ### 表字典類型 > 從數據庫表獲取字典數據，dictCode格式說明: 表名,文本字段,取值字段 ```html <j-dict-select-tag v-model="queryParam.username" placeholder="請選擇用戶名稱" dictCode="sys_user,realname,id"/> ``` ### 表字典類型條件 > 當從數據庫表獲取字典數據的時候支持寫查詢條件進行過濾數據 > 下面dictCode = "sys_user,realname,id,sex = '2'"表示從sys_user表中查詢數據且只查詢sex='2'的數據 ```html <j-dict-select-tag v-model="queryParam.username" placeholder="請選擇用戶名稱" dictCode="sys_user,realname,id,sex = '2'"/> ``` ## 參數說明 ## DictSelectUtil.js 列表字典函數用法 ---- ### 第一步： 引入依賴方法 ``` import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil' ``` ### 第二步： 在created()初始化方法執行字典配置方法 ``` this.initDictConfig(); ``` ### 第三步： 實現initDictConfig方法，加載列表所需要的字典(列表上有多個字典項，就執行多次initDictOptions方法) ``` //sexDictOptions 自行定義 initDictConfig() { //初始化字典 - 性別 initDictOptions('sex').then((res) => { if (res.success) { this.sexDictOptions = res.result; } }); }, ``` ### 第四步：實現字段的customRender方法 ``` customRender: (text, record, index) => { //字典值替換通用方法 return filterDictText(this.sexDictOptions, text); ```