element-vue 根据下拉框选项 判断 显示的是 el-input还是el-autocomplete

Question

下拉框里有两个值，
如果选择第一个“文本框”，会显示el-input的输入框
如果选择第二个“文本选项”，会显示el-autocomplete的输入框
谢谢啦

Answer 1

该回答通过自己思路及引用到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 方法来查询选项。该方法接收两个参数：查询字符串和回调函数。在该方法中，我们根据查询字符串查询选项，并调用回调函数返回查询结果。

---

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢