Element-UI的复合输入框应用

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%
}