# JDictSelectTag 组件用法

---

- 从字典表获取数据,dictCode 格式说明: 字典 code

```html
<j-dict-select-tag v-model="queryParams.sex" placeholder="请输入用户性别" dictCode="sex" />
```

v-decorator 用法：

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

- 从数据库表获取字典数据，dictCode 格式说明: 表名,文本字段,取值字段

```html
<j-dict-select-tag v-model="queryParams.username" placeholder="请选择用户名称" dictCode="sys_user,realname,id" />
```

# JDictSelectUtil.js 列表字典函数用法

---

- 第一步: 引入依赖方法

```js
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
```

- 第二步: 在 created()初始化方法执行字典配置方法

```js
// 初始化字典配置
this.initDictConfig()
```

- 第三步: 实现 initDictConfig 方法，加载列表所需要的字典(列表上有多个字典项，就执行多次 initDictOptions 方法)

```js
function initDictConfig() {
  //初始化字典 - 性别
  initDictOptions('sex').then(res => {
    if (res.success) {
      this.sexDictOptions = res.result
    }
  })
}
```

- 第四步: 实现字段的 customRender 方法

```js
customRender: (text, record, index) => {
  //字典值替换通用方法
  return filterDictText(this.sexDictOptions, text)
}
```
