二次封装el- select，通用字典库查询组件

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

二次封装el- select，通用字典库查询组件

前言

因为字典库统一原因，需要一个组件去根据字典码查询字典，并返回选中值

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1.实例代码

代码如下（示例）：

//main.js全局引入

//组件引用
<dict-select dictCode="isShow" v-model="classid" ></dict-select>

2.读入数据

代码如下（示例）：

<el-select :value="value" :placeholder="placeholder" @change="handleInput" :multiple="multiple">
    <el-option v-for="item in options"  :key="item.value" :label="item.label" :value="item.value">
    </el-option>
  </el-select>



import { 'api地址'} from '@/api/api'

export default {
  name: 'dictSelect',
  props: {
    multiple: {
      type: Boolean,
      default: false,
      //是否多选
    },
    value: [String, Number],
    dictCode: String,
    //传入的字典码
    placeholder:{
      type:String,
      default:'请输入'
    }
  },

  
  data() {
    return {
      options: [],//查询字典库的列表
    }
  },
  watch: {
  //监听字典码如果发生变化则重新调用字典库
    dictCode: {
      immediate: true,
      handler() {
        this.initDictData()
      },
    },
  },
  created() {},
 
  model:{
      prop: 'value',
      event: 'change'
    },
  methods: {
    initDictData() {
      //根据字典Code, 初始化字典数组
      'api接口'(this.dictCode).then((res) => {

        if (res.success) {
          //获取字典列表
          this.options = res.result
        }
      })
    },
    handleInput(e) {
       //选中字典列表抛出选中值changes
        this.$emit('changes', e);
      
      },
   
  },
}
</script>
  
  <style scoped>
</style>

总结

组件全局引入后，直接复制粘贴更换字典码和绑定值，就能直接使用，不用从子组件拿到返回值在赋值，省略很多重复操作。