父
<!-- 封装 -->
<el-descriptions-item label="分机机构">
<wb-select :parentValue.sync="dadeval" placeholders="分机机构"></wb-select>
</el-descriptions-item>
export default {
data() {
return {
dadeval:"",
}
}
}
子组件
<template>
<div>
<el-popover placement="bottom" :width="width" trigger="click" popper-class="wb-padding" v-model="visible">
<div>
<div style="overflow: auto;height: 230px;">
<ul class="el-scrollbar__view el-select-dropdown__list">
<div v-for="(it,index) in list" :key="index" @click="upData(it)"><li class="el-select-dropdown__item"><span>{{it.name}}</span></li></div>
</ul>
</div>
<div :style="'background-color: #fff;width:'+width+' px;'">
<div style="display: flex; line-height: 30px;cursor: pointer;">
<div class="addBorder" style="width: 50%;">新增</div>
<div class="delBorder" style="width: 50%;">重置</div>
</div>
</div>
</div>
<el-input type="text" ref="myInput" v-model="name" @focus="focusSelect" @input="remoteName" slot="reference" size="mini" style="width: 100%;" :placeholder="placeholders"></el-input>
</el-popover>
</div>
</template>
<script>
export default {
props: {
parentValue: "",
placeholders:"",
},
data() {
return {
name: '',
width:"200",
dataList:{"mshopid":""},
visible: false,
list: [{'id':1,"name":"dade"},{'id':2,"name":"dade2"},{'id':3,"name":"dade3"},{'id':4,"name":"dade4"}]
};
},
mounted() {
},
methods: {
// 获得焦点
focusSelect(){
const inputElement = this.$refs.myInput.$el;
this.width = inputElement.offsetWidth;
console.log(`el-input 的宽度为:${this.width}px`);
},
// 数据改变
remoteName(e){
console.log(this.placeholders)
},
//点击选中,返回值
upData(it){
this.name = it.name;
this.$emit('update:parentValue', it.id);
this.visible = false;
}
}
};
</script>
</script>
<style>
.el-select-dropdown__wrap {
max-height: 200px !important;
}
.wb-padding {
padding: 0px;
}
.addBorder{
text-align: center;
border-top: 1px solid rgb(221 221 221);
}
.delBorder{
text-align: center;
border-top: 1px solid rgb(221 221 221);
border-left: 1px solid rgb(221 221 221);
}
</style>