# DgSelect 选择器

> 基于 elementUi 封装集成度更高的下拉框组件，实现 ApiCode 对接后台数据。

### 四种基本初始化下拉框选项方式

::: demo 组件 Select 使用示例

```vue
<template>
  <p>1、dimCode方式（apiCode内置默认为'sysDictMember'）</p>
  <dg-select v-model="selectValue1" dimCode="DIM_JOB_PROC_CYCLE"></dg-select>

  <p>2、selectOptions直接传数组方式（如果selectOptions是动态获取的注意渲染问题，使用v-if取到数组后在渲染dgSelect）</p>
  <dg-select v-model="selectValue2" :selectOptions="selectOptions"></dg-select>

  <p>3、selectStr传入字符串拆分方式 (同selectOptions方式一样注意渲染问题)</p>
  <dg-select v-model="selectValue3" selectStr="a|1,b|2"></dg-select>

  <p>
    4、自定义apiCode方式（需自己到数据库sys_api_list表中配置对应的apiCode,名字对应ROWNAME,值对应ROWCODE,可参考'stdDimItemsMember'配置）
  </p>
  <dg-select v-model="selectValue4" apiCode="stdDimItemsMember"></dg-select>
</template>
<script>
export default {
  name: 'SelectDemo',
  data() {
    return {
      selectValue1: '',
      selectValue2: '',
      selectValue3: '',
      selectValue4: '',
      selectOptions: [
        { name: '1', id: 'a' },
        { name: '2', id: 'b' },
      ],
    }
  },
  methods: {
    changeTab(treeNode) {
      this.treeNode = treeNode
      console.log(this.treeNode)
    },
  },
}
</script>
```

:::
`

## API

| 属性          | 说明                                             |             类型             | 默认值 |             可选值             |                              事例 ｜                              |
| ------------- | ------------------------------------------------ | :--------------------------: | :----: | :----------------------------: | :---------------------------------------------------------------: | --- | ---- |
| v-model       | 绑定值                                           | ` Boolean / String / Number` |        |               -                |
| name          | 绑定值的 name 中文名                             |           `String`           |        |               -                |                  - ｜ `:name.sync="selectName"`                   |
| DgStyle       | 内联样式                                         |           `String`           |        |               -                |
| fileType      | 定义请求回来的 json 数据格式                     |           `Object`           |        | `{label: 'name', value: 'id'}` |
| clearable     | 是否可以清空选项                                 |          `Boolean`           |        |            `false`             |
| multiple      | 是否多选                                         |          `Boolean`           |        |            `false`             |
| collapseTags  | 多选时是否将选中值按文字的形式展示               |          `Boolean`           |        |            `false`             |
| placeholder   | 输入框占位文本                                   |           `String`           |        |               -                |
| disabled      | 是否禁用状态                                     |          `Boolean`           |        |            `false`             |
| size          | 输入框尺寸                                       |           `String`           |        |             `mini`             |                       medium / small / mini                       |
| dimCode       | 数据库所对应的 dimCode 值                        |           `String`           |        |               -                |                             `select`                              |
| apiCode       | 数据库所对应的 apiCode 值                        |           `String`           |        |               -                |
| filterVal     | 使用 apiCdoe 加 dimCode 方式取下拉框值时的过滤值 |           `String`           |        |               -                |
| selectOptions | 直接传入的下拉框中的所有值,                      |           `Array`            |        |               -                | `[{name: '1', id: 'a'},{name: '2', id: 'b'}]（根据fileType改变）` |
| selectStr     | 直接传入的下拉框中的所有值                       |           `String`           |        |               -                |                               ```a                                | 1,b | 2``` |

## Events

| 事件名称 | 说明             |               回调参数                |
| -------- | ---------------- | :-----------------------------------: |
| change   | 下拉框选择后触发 | 1、选择的值、2、索引、3、以及值的长度 |

## 更新日志

#### v1.0.0（2019-09-17）

- 初始版本

#### v1.0.8（2019-09-19）

- [优化] 增删改查的封装

#### v1.0.8（2019-03-07）

- 完善文档

#### v1.0.8（2019-03-17）

- 完善文档