ant-design-vue 数据字典 select 组件封装

对于前后端协商形成的 key-value 数据字典功能，可以通过平台维护该数据字典功能，也有可以通过前端自行添加枚举值统一配置。

一、前端维护枚举值

首先，我们在配置文件中，配置枚举值信息。

// src/components/Dictionary/config/index.js
export const riskGrade = [
  { name: '好', value: 3 },
  { name: '一般', value: 2 },
  { name: '差', value: 1 },
]

Array.prototype.forEach.call([
  riskGrade,
], item => {
  Object.defineProperty(item, '_find', {
    configurable: true,
    enumerable: false,
    get: () => {
      return function (val) {
        if (val !== undefined && val !== null && typeof val !== 'object') {
          const result = item.find(x => x.value === val)
          return result ? result.name : val
        }
      }
    }
  })
})

封装组件配置说明如下：

---

属性	说明	类型	默认值
value	指定当前选中的条目	[string, number]	-
type	映射数据字典的常量名	string	''
optionsSource	设置 options 数据	array	[]
optionModel	设置 name 和 value 字段	object	{ name, value}
setDefaultValue	设置是否有默认值	boolean	false

1.如何映射数据字典呢？

import * as config from './config/index'
  computed: {
    optionsList () {
      ......
      if (!this.type) return
      if (config[this.type]) {
        return config[this.type] || []
      }
      .....
    }
  }

2.配置数据源

我们也允许外部传入数据源进行显示。

computed: {
  optionsList () {
    if (this.optionsSource && this.optionsSource.length) {
      return [...this.optionsSource]
    }
    ......
  }
}

3.配置 optionModel 的 name 和 value 的字段

由于我们可以传入数据源，但显示的 name 和 绑定的值的字段可能存在无法正确地展示下拉选项，因此支持外部传入 name 和 value 字段来处理。

render () {
  const optionList = (this.optionsList).map(item => {
    item.name = item[this.optionModel.name]
    item.value = item[this.optionModel.value]
    return item
  })
   return <a-select
    value={this.value}
  >
    {optionList.map(option => {
      return <a-select-option value={option.value}>{option.name}</a-select-option>
    })}
  </a-select>
}

4.配置默认值

我们可以通过设置 setDefaultValue 为 true 来设置默认值，当然 v-model 绑定的值为空，且存在 options 数据时，我们将其第一项设置为默认值。

if (this.setDefaultValue && !this.value) {
  const unwatcher = this.$watch('optionsList', function (val) {
    if (val && val.length) {
      this.$emit('change', val[0][this.optionModel.value])
      this.$emit('select', { row: val[0], value: val[0][this.optionModel.value] })
      if (unwatcher) unwatcher()
    }
  })
}

5.全局注册组件

// src/components/Dictionary/index.js
import Dictionary from './dictionary'
Dictionary.install = function (Vue) {
  Vue.component('select-dictionary', Dictionary)
}
export default Dictionary

// src/core/lazy_use.js
// 自定义组件
import Dictionary from '@/components/Dictionary/index'
Vue.use(Dictionary)

// main.js
import './core/lazy_use'

6.如何使用组件呢？

<select-dictionary
  v-model="form.bizGroupCode"
  :options-source="bizGroupList"
  :option-model="{
    name: 'bizGroupName',
    value: 'bizGroupCode',
  }"
  @select="({row,value}) => { form.inventoryOrgCode = '' }"
/>