文章标题

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

<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: 200
b16c
px;
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);
}
});