Element-UI的复合输入框应用
工作需求 : 应用复合输入框支持右侧下拉选项 左侧支持输入 ,当左侧输入时候右侧下拉清空
代码如下:
// html
<el-input placeholder="请输入应用链接" :value="dataDetail.url" class="input-width-select" style="width:80%" @focus="getValue" @input="changInput($event)">
<el-select :disable="true" v-model="url" clearable slot="append" style="width:100px" placeholder="常用链接">
<el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-input>
// script
data(){
return {
dataDetail:{}, // 表单
url:null, // 下拉框的值
list:[
{label:'测试1',value:1},
{label:'测试2',value:2},
{label:'测试3',value:3},
{label:'测试4',value:4},
] // 数据字典下拉列表
}
},
watch:{
url(newVal,oldVal){
if(newVal){
this.list.find(res =>{
if(res.value === newVal){
this.dataDetail.url = newVal
}
})
}else{
this.dataDetail.url = this.dataDetail.url
}
}
},
methods:{
// 失焦后清空下拉框的值
getValue(){
this.url = null
},
changInput(value){
this.$forceUpdate() // 用于层级深的时候input输入没有反应刷新
this.dataDetail.url = value // 刷新后赋值
}
}
// css 按照官网写之后发现select没有展示是因为没有给el-select宽的问题。
.el-select{
width:100px;
height:100%;
}
.input-width-select{
width:80%
}