README.md 1.5 KB
Newer Older
1
# JDictSelectTag 组件用法
2
----
3 4 5 6 7 8 9 10 11 12 13
- 从字典表获取数据,dictCode格式说明: 字典code
```html
<j-dict-select-tag  v-model="queryParam.sex" placeholder="请输入用户性别"
                  dictCode="sex"/>
```

v-decorator用法:
```html
<j-dict-select-tag  v-decorator="['sex', {}]" :triggerChange="true" placeholder="请输入用户性别"
                  dictCode="sex"/>
```
14

15 16 17 18 19
- 从数据库表获取字典数据,dictCode格式说明: 表名,文本字段,取值字段
```html
<j-dict-select-tag v-model="queryParam.username" placeholder="请选择用户名称" 
                   dictCode="sys_user,realname,id"/>
```
20 21 22



23
# JDictSelectUtil.js 列表字典函数用法
24 25
----

26 27 28 29
- 第一步: 引入依赖方法
```html
       import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil'
```
30

31 32
- 第二步: 在created()初始化方法执行字典配置方法
```html
33
      //初始化字典配置
34 35 36 37 38 39
      this.initDictConfig();
```
      
- 第三步: 实现initDictConfig方法,加载列表所需要的字典(列表上有多个字典项,就执行多次initDictOptions方法)
      
```html
40 41 42 43 44 45 46 47
      initDictConfig() {
        //初始化字典 - 性别
        initDictOptions('sex').then((res) => {
          if (res.success) {
            this.sexDictOptions = res.result;
          }
        });
      },
48 49 50 51
```
      
- 第四步: 实现字段的customRender方法
```html
52 53 54
     customRender: (text, record, index) => {
       //字典值替换通用方法
       return filterDictText(this.sexDictOptions, text);
55 56
     }
```