vue-cli3.0+antd+select

前言：

        通过和 iview 和 element , antd 还是有他特殊的优势的,那就是功能更加丰富，当然，功能丰富同样代表着复杂程度相比较来说，更高了，这里来对他进行二次封装，此外：

        在我们实际应用的情况下会遇到给他赋值赋不上，用defaultValue不好使，满足不了我们的需要，需要用value来实现，

点我查看详情

实现步骤：

1、我们的封装组件antd_select.vue

<template>
  <a-select
     style="min-width: 60px"
     :value='selVal'
     :defaultValue="defaultValue"
     :dropdownClassName="dropdownClassName"
     :dropdownStyle="dropdownStyle"
     :filterOption="filterOption"
     :firstActiveValue="firstActiveValue"
     :maxTagCount="maxTagCount"
     :maxTagTextLength="maxTagTextLength"
     :placeholder="placeholder"
     :defaultOpen="defaultOpen"
     :getPopupContainer="getPopupContainer"
     :allowClear="allowClear"
     :autoFocus="autoFocus"
     :defaultActiveFirstOption="defaultActiveFirstOption"
     :disabled="disabled"
     :dropdownMatchSelectWidth="dropdownMatchSelectWidth"
     :notFoundContent="notFoundContent"
     :showSearch="showSearch"
     :showArrow="showArrow"
     :labelInValue="labelInValue"
     :mode="mode"
     :size="size"

     @change="selectChange"
     @blur="blurFun"
     @focus='focusFun'
     @inputKeydown='inputKeydown'
     @search='searchVal'
     >
      <a-select-option :value="item.value" v-for="(item,index) in options" :key="index">{{item.label}}</a-select-option>
    </a-select>

</template>

<script>

export default {
  props: {
    /**
     * 下拉框数据
     */
    options:Array,
    /**
     * 参数
     */
    Value:Object,//v-model
    /**
     * 默认选中的值
     * 千万注意，如果labelInValue == false，那么直接传字符串就行，true的话得传对象
     * 1、String，传选中的value
     * 2、 defaultValue:{
            key:'1226SX13518X'
          }
     */
    defaultValue:Object,//默认数据-string|string[]|number|number[]
    dropdownClassName:String,//下拉菜单的 className 属性
    dropdownStyle:Object,//下拉菜单的 style 属性
    filterOption:Boolean||Function,//是否根据输入项进行筛选,当其为一个函数时，会接收 inputValue, option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false
    firstActiveValue:String,//默认高亮的选项
    maxTagCount:Number,//最多显示多少个 tag
    maxTagTextLength:Number,//最大显示的 tag 文本长度
    placeholder:String,//默认值
    defaultOpen:Boolean,//是否默认展开下拉菜单
    getPopupContainer: {//菜单渲染父节点,默认渲染到body
      type: Function,
      default:triggerNode => triggerNode.parentNode//指向父级
    },
    allowClear:{//是否支持删除
      type:Boolean,
      default:true,
    },
    autoFocus:{//默认获取焦点
      type:Boolean,
      default:false,
    },
    defaultActiveFirstOption:{//默认高亮下拉里面第一个
      type:Boolean,
      default:true,
    },
    disabled:{//是否禁用
      type:Boolean,
      default:false,
    },
    dropdownMatchSelectWidth:{//下拉菜单和选择器同宽
      type:Boolean,
      default:true,
    },
    notFoundContent:{//当下拉列表为空时显示的内容
      type:String,
      default:'暂无数据'
    },
    showSearch:{//使单选模式可搜索
      type:Boolean,
      default:false,
    },
    showArrow:{//是否显示下拉小箭头
      type:Boolean,
      default:true,
    },
      /**
       * 是否把每个选项的 label 包装到 value 中
       * 会把 Select 的 value 类型从 string 变为 {key: string, label: vNodes} 的格式
       */
    labelInValue:{
      type:Boolean,
      default:true,
    },
      /**
       * 设置 Select 的模式为多选或标签
       * 'default' | 'multiple' | 'tags' | 'combobox'
       */
    mode:String,
      /**
       * 选择框大小
       * large small
       */
    size:String,
     /**更多详细请参考官方api */
  },
  data () {
    return {
      name:'',//select封装
      selVal:{},//监听
    };
  },

  components: {},

  computed: {},

  created() {},

  mounted() {

  },

  methods: {
    /**
     * 下拉值发生改变时
     */
    selectChange(value,option){
      this.selVal = value;
      this.$emit('selectChange',value);
    },
    /**
     * 失去焦点的时回调
     */
    blurFun(){
      this.$emit('blurFun');
    },
    /**
     * 获得焦点时回调
     */
    focusFun(){
      this.$emit('focusFun');
    },
    /**
     * 键盘按下时回调
     */
    inputKeydown(){
      this.$emit('inputKeydown');
    },
    /**
     * 文本框值变化时回调
     */
    searchVal(value){
      this.$emit('inputKeydown',value);
    },
    /**更多详细请参考官方api */
  },

  watch: {
    /**
     * 监听传来的值
     */
    Value(val){
      if(val.key == '' || val.key == undefined || val.key == null){
        return;
      }
      this.selVal = val;
    }
  }
}
</script>

2、js部分引进来，注册 , data里写数据，mothods写方法

import aSel from '@/components/comantd/antd_select'

 components: {
    aSel,
  },
 
  data:{
    return {
     /**
       * 下拉数据
       */
      allowClear:true,//下拉框是否需要删除
      peojectOptions:[],//工程类型
      bidsOptions:[],//标段类型
      employeesOptions:[],//人员类型
      companiesOptions:[],//企业类型
      project_obj:{},//工程默认选中
      bids_obj:{},//标段默认选中
      employees_obj:{},//人员默认选中
      companies_obj:{},//企业默认选中
    }
},
methods:{
    /**
     * 下拉
     */
    handleChangeGC(data){//工程
      this.addPostData.project_no = data.key;//将值赋给我们的字段
      this.getBidData(data.key);
    },
}

3、template部分：

<aSel :Value='bids_obj' :options='bidsOptions' :allowClear='allowClear' @selectChange='handleChangeBT' :disabled='input_dis' :showArrow='!input_dis'></aSel></p>

更多：

点击进入官网： 官网入口