使用VUE自定义组件封装数据字典实战

背景

照惯例，先交待下背景，从真实需求出发，讲述设计思路和实现方式。
软件系统中，会有一些成组的常量值，来描述业务实体的属性，如性别、证件类型、审批状态等。我们通常称之为数据字典，作为系统后台管理的一个独立功能，来维护字典类型以及对应的字典值。后端功能和实现都比较简单，没什么好说的，今天重点要说的是前端的封装。

设计与实现

对于数据字典，前端展现往往有三种常用的形式，下拉列表、单选按钮组和复选框组，其中，最常用是下拉列表，这里就以下拉列表的实现为例来说明，其他两种类似，不重复描述。

技术栈采用的还是vue2.0，UI组件库使用element ui。element ui提供了Select 选择器(传送门：https://element.eleme.cn/#/zh-CN/component/select），实现效果如下：

官方示例代码如下：

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

这是从纯前端角度来展示如何使用，在软件系统中，数据是来自于后端的，也就是前端需要调用后端的api，拿到数据来填充列表。

直接使用select组件，是不是可以呢？答案是可以用，但用起来比较繁琐，需要在页面加载的时候，调用后端API接口拿数据，在data中定义存放字典数据的变量，并且一个实体编辑页面，使用到字典属性往往不止一个，三五个也比较常见，这时候，需要定义多个变量来存放字典项以及加载数据，开发工作量变大且容易出错。
那有没有办法让使用变得更方便呢？答案也简单，就是自定义封装一个组件来实现。我们的目标是传入一个数据字典的类型编码，组件内部调用后端API，完成数据的加载与存储，在选择项变化时，自动更新绑定的对应的业务实体的属性值。同时，在业务实体的编辑页面，也能自动绑定和显示已选择的字典项。

封装是在elment ui的select组件的基础上进行的，先附上完整源码。

<template>
  <el-select
    :value="value"
    :size="size"
    clearable
    :multiple="multiple"
    :disabled="readonly"
    style="width:100%;margin:0px auto;"
    @change="change"
  >
    <el-option
      v-for="item in dictionaryItemList"
      :key="item.code"
      :value="item.code"
      :label="item.label"
    />
  </el-select>
</template>

<script>

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: [String, Array],
      required: false,
      default: ''
    },
    code: {
      type: String,
      default: ''
    },
    readonly: {
      type: Boolean,
      required: false,
      default: false
    },
    size: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dictionaryItemList: []
    }
  },
  watch: {
    code: {
      immediate: true,
      handler: 'loadData'
    }
  },
  methods: {
    change(value) {
      this.$emit('change', value)
    },
    loadData() {
      if (this.code) {
        this.dictionaryItemList = []
        this.$api.system.dictionaryType.getItem(this.code).then(res => {
          this.dictionaryItemList = res.data
        })
      }
    }
  }
}
</script>

下面重点说下封装自定义组件需要注意的点。
1.很重要的一点，是设置model选项。因为默认情况下，model使用名为 value 的 prop 和名为 input 的事件，对于我们要封装的select组件，事件应该使用chang而不是input，所以需要做如下设置：

 model: {
    prop: 'value',
    event: 'change'
  }

2.不仅要考虑单选情况，还需要考虑多选情况，因此value属性，类型是一个数组，可以是String，也可以是Array。

 value: {
      type: [String, Array],
      required: false,
      default: ''
    }

3.为了组件的可配置性，将select组件自身的属性，设置为prop属性，这样在使用的时候，就能通过属性绑定的方式灵活配置了。

  	readonly: {
      type: Boolean,
      required: false,
      default: false
    },
    size: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    }

4.code是最重要的属性，即我们上面提到的数据字典类型的编码，是后端查找字典项的依据。需要注意的是，这里并未使用mounted事件来加载数据，而是使用了watch来监控该值的变化。这么做是考虑到在某些业务场景下，需要动态刷新下拉列表的数据项，如多个下拉列表联动。

 watch: {
    code: {
      immediate: true,
      handler: 'loadData'
    }
  }
   ……
 loadData() {
  if (this.code) {
    this.dictionaryItemList = []
    this.$api.system.dictionaryType.getItem(this.code).then(res => {
      this.dictionaryItemList = res.data
    })
  }
 }

5.选择项变化时，通过change事件，调用emit，把最新的值传递给使用方，这一步很关键。

 change(value) {
      this.$emit('change', value)
 }

整体而言，封装工作并不复杂，下面看下使用方如何来调用

  <!--表单区域 -->
      <el-form-item label="名称" prop="name">
        <el-input v-model="entityData.name" :readonly="readonly" />
      </el-form-item>
      <el-form-item label="编码" prop="code">
        <el-input v-model="entityData.code" :readonly="readonly" />
      </el-form-item>  
      <el-form-item label="数据类型" prop="dataType">
        <dictionary-select
          v-model="entityData.dataType"
          :code="constant.ENTITY_MODEL_PROPERTY_TYPE"
          :readonly="readonly"
        
        />
      </el-form-item>

      <el-form-item label="控件类型" prop="widgetType">
        <dictionary-select
          v-model="entityData.widgetType"
          :code="widgetType"
          :readonly="readonly"
        />

  

效果图如下：

通过封装后，整个下拉列表就成为了一个相对独立的组件了。只需要传入一个数据字典类型的编码，就能自动加载数据，更新绑定，对于使用的页面，无需定义额外的字典项存储变量，是不是很简洁方便？