el-select光标位置问题

Question

<template>
    <el-select v-model="selectValue" placeholder="请输入" clearable style="width: 240px"
               filterable remote :remote-method="querySearch"
               @change="onSelectChange" reserve-keyword>
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
</template>

<script setup>
import {ref} from "vue";

// 搜索框
let selectValue = ref('')
const options = [
    {
        value: 'Option1-value',
        label: 'Option1-label',
    },
    {
        value: 'Option2-value',
        label: 'Option2-label',
    }
]
const querySearch = (query) => {
    console.log('querySearch', query)
}
const onSelectChange = (value) => {
    console.log('onSelectChange', value)
}
</script>

<style scoped lang="scss">
</style>

下拉框选中内容后，光标在输入框最前面，且无法移动。
该如何让光标默然在后面

版本：
"dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.7.9",
    "element-plus": "^2.9.0",
    "pinia": "^2.3.0",
    "pinia-plugin-persistedstate": "^4.1.3",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  }

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

el-select光标位置问题

你遇到了 el-select 组件的光标位置问题，可能是指光标在选择框中无法正确定位或是光标在输入框中无法正确定位。

解决方案：

1. 检查 el-select 组件的 clearable 属性是否设置为 true，如果设置为 true，可能会导致光标位置问题。
2. 尝试使用 el-select 组件的 filterable 属性，设置为 true 可以使选择框支持输入框的光标定位。
3. 如果以上方法不起作用，可以尝试使用 el-input 组件来代替 el-select 组件，或者使用 el-autocomplete 组件来实现选择功能。

核心代码：

<el-select v-model="selectValue" placeholder="请输入" filterable style="width: 200px;">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

其中，filterable 属性设置为 true 可以使选择框支持输入框的光标定位。