下拉框里有两个值，
如果选择第一个“文本框”，会显示el-input的输入框
如果选择第二个“文本选项”，会显示el-autocomplete的输入框
谢谢啦
该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
您可以使用 v-if 指令根据下拉框选项的值来判断显示哪个组件。具体实现可以参考以下代码：
<template>
<div>
<el-select v-model="selected" placeholder="请选择">
<el-option label="文本框" value="input"></el-option>
<el-option label="文本选项" value="autocomplete"></el-option>
</el-select>
<div v-if="selected === 'input'">
<el-input v-model="inputValue" placeholder="请输入"></el-input>
</div>
<div v-else-if="selected === 'autocomplete'">
<el-autocomplete v-model="inputValue" :fetch-suggestions="querySearch" placeholder="请输入"></el-autocomplete>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selected: '', // 下拉框选项的值
inputValue: '', // 输入框的值
options: [] // el-autocomplete 的选项
}
},
methods: {
// el-autocomplete 的选项查询方法
querySearch(queryString, cb) {
// 根据查询字符串查询选项
const results = this.options.filter(option => {
return option.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
})
// 调用回调函数返回查询结果
cb(results)
}
}
}
</script>
在上面的代码中，我们使用了 v-if 和 v-else-if 指令来判断选项的值，如果选项的值为 'input'，则显示 el-input 组件，如果选项的值为 'autocomplete'，则显示 el-autocomplete 组件。
同时，我们还使用了 v-model 指令来绑定输入框的值和下拉框的值，实现了组件之间的联动。
对于 el-autocomplete 组件，我们还定义了一个 querySearch 方法来查询选项。该方法接收两个参数：查询字符串和回调函数。在该方法中，我们根据查询字符串查询选项，并调用回调函数返回查询结果。
如果以上回答对您有所帮助，点击一下采纳该答案～谢谢
不知道你这个问题是否已经解决, 如果还没有解决的话:四个emit触发事件:input,focus,blur,clear调节显示隐藏高亮清除
四个键盘事件up,down,enter,tab
四个插槽:prepend,append,prefix,suffix
v-bind="[$props, $attrs]",v-bind可用数组/对象,说明接收所有跟input相关的属性
我可以为您提供如下代码示例，实现下拉框选项判断，并根据选项结果展示el-input或者el-autocomplete的表单控件：
<template>
<el-select v-model="option">
<el-option label="选项一" value="option1"/>
<el-option label="选项二" value="option2"/>
</el-select>
<div v-if="option === 'option1'">
<el-input v-model="inputValue1"/>
</div>
<div v-if="option === 'option2'">
<el-autocomplete
v-model="inputValue2"
:fetch-suggestions="querySearch"
placeholder="请选择或输入">
<template slot-scope="{item}">
<span class="addr">{{ item.name }}</span>
</template>
</el-autocomplete>
</div>
</template>
<script>
export default {
data() {
return {
option: '',
inputValue1: '',
inputValue2: '',
dataOptions: [], // el-autocomplete 数据源
}
},
methods: {
querySearch(queryString, cb) {
let data = this.dataOptions;
let results = queryString ? data.filter(this.createFilter(queryString)) : data;
cb(results);
},
createFilter(queryString) {
return field => {
return field.name.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
};
},
}
}
</script>
首先使用el-select组件可实现选项一和选项二的选择，绑定v-model="option"即可获取当前选项的值。然后使用v-if判断选项值，根据不同的选项值展示不同的表单控件。当选项一时，展示el-input组件，绑定v-model="inputValue1"即可获取输入框中的值；当选项二时，展示el-autocomplete组件，并通过:fetch-suggestions绑定querySearch方法作为下拉框的数据源，然后再通过template自定义下拉框中每一行数据的展示格式，绑定v-model="inputValue2"即可获取输入框中的值。
需要注意的是，针对el-autocomplete组件，需要先定义一个dataOptions数组作为下拉框的数据源，在querySearch方法中使用这个数组作为数据源。同时，在createFilter方法中匹配关键字需要匹配name属性而非value属性。