文章标题

组件代码，样式可以自己调整

<template>
    <!--下拉单选框-->
    <div class="base-select" @click="showDataList" >
        <div class="sub-selected-value">
            <div class="title">
                {{title}} <span style="color: red" v-if="required && !readOnly">*</span>
            </div>
            <div class="value" :class="this.title.length>4 ? shortClass : longClass" v-if="!readOnly">
                <p v-if="!isNullData(selected[valueName])">{{selected[valueName]}}<p>
                <div v-if="!readOnly">
                    <div class="value blank" v-if="isNullData(selected[valueName])">
                        {{placeholder}}
                    </div>
                    <div class="sub-select-list" v-bind:style="{width: widthData}" v-if="showData">
                        <div :class="selected[valueName]==item.value ? sub_select_item_active : sub_select_item" v-for="(item, index) in dataList"  @click.stop="select(item, index)">
                            {{item.value}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="exhibition" v-if="readOnly">
                <p>{{selected[valueName]}}</p>
            </div>
        </div>
        <div class="after" v-if="!readOnly"></div>
    </div>
</template>
<script type="text/ecmascript-6">
    export default{
        name:'base-select',
        data(){
            return{
                shortClass:"short",
                longClass:"long",
                showData: false,
                placeholder: "请选择",
                sub_select_item_active: "sub-select-item-active",
                sub_select_item: "sub-select-item"
            }
        },
        props: {
            title: String,
            required:{
                type: Boolean,
                default: true
            },
            readOnly:{
                type: Boolean,
                default: false
            },
            dataList:Array,
            keyName:String,
            valueName:String,
            eventFlag:{
                type: String,
                default: "N"
            },
            selected: {},
            widthData:{
                type: String,
                default: "100%"
            }
        },
        methods: {
            showDataList(){
                if(this.readOnly) return;
                if(this.showData){
                    this.showData = false;
                }else{
                    if(this.dataList.length > 0){
                        this.showData = true;
                    }else{
                        this.$handPlugin.toast.show('没有查询到数据');
                    }
                }
            },
            select(item,index){
                this.showData=false;
                this.selected[this.keyName] = item.key;
                this.selected[this.valueName] = item.value;
                if("Y" === this.eventFlag){
                    this.$emit("selected",item);
                }
            },
        }
    }
</script>
<style lang="scss">
    .weui-cells {
        overflow: inherit !important;
    }

    .base-select {
    .weui-cells { overflow: inherit;
    }
    position: relative;
    width: 100%;
    font-size: 15px;
    background-color: #FFFFFF;
    line-height: 1.41176471;
    padding: 0 0 0 15px;
    .after {
        position: absolute;
        top: 50%;
        margin-top: -4px;
        right: 33px;
        content: "";
        display: inline-block;
        height: 6px;
        width: 6px;
        border-width: 0 2px 2px 0;
        border-color: #C8C8CD;
        border-style: solid;
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    }
    .sub-selected-value {
        position: relative;
        border-top: 1px solid #D9D9D9;
        padding: 10px 30px 10px 0;
        height: 21px;
    .title { float: left;
    }
    .long{
        width: 70%;
    }
    .short{
        width: 65%;
    }
    .value {
        position: relative;
        float: right;
        right: 15px;
        /*//border: 1px solid;*/
        text-align: right;
        height: 25px;
        font-size: 15px;
        color: #000000;
        word-wrap: break-word;
    p { overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .sub-select-list {
        position: absolute;
        top: 28px;
        right: 0;
        max-height: 200px;
        overflow-y: auto;
        /*//right: 30px;*/
        background: white;
        box-shadow: 1px 1px 1px 1px #D9D9D9;
        z-index: 9;
    .sub-select-item { width: auto;
        /*min-width: 7.25rem;
        height: 2.5rem;
        line-height: 2.5rem;*/
        line-height: 2rem;
        position: relative;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
        text-overflow: ellipsis;
    }
    .sub-select-item-active {
        background-color: #32A4EC;
        width: auto;
        /*min-width: 7.25rem;
        height: 2.5rem;
        line-height: 2.5rem;*/
        line-height: 2rem;
        position: relative;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
        text-overflow: ellipsis;
    }
    }
    }
    .blank {
        color: #959595;
        right: 0;
    }
    .exhibition{
        position: relative;
        float: right;
        right: 0;
        text-align: right;
        height: 25px;
        font-size: 15px;
        color: #000000;
    }
    }
    }
</style>

父组件调用代码
在vue中涉及到父子组件的时候，数据最好采用json对象的格式。
在父组件中定义一个数组装载下拉列表显示的数据的集合applyCompanyList，然后定义一个展示的值header，keyName=”company_id”和valueName=”company_name”中的值要是header对象中存在的属性名

<BaseSelect 
    :selected="header" 
    :dataList="applyCompanyList" 
    title="报销公司" 
    keyName="company_id"
    valueName="company_name" 
    showPlaceholder="true"></BaseSelect>

ComboxService.getCompany(this.user.employee_id).then((data) => {
     let list = data.result.record;
     for (let i = 0; i < list.length; i++) {
          let com = {
          "key": list[i].company_id,
          "value": list[i].company_code + "-" + list[i].company_short_name};
          this.applyCompanyList.push(com);
     }
});