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

让【道友老李】来帮你解答，本回答参考通义千问大模型编写，并整理提供，如果还有疑问可以点击头像关注私信或评论。

如果答案让您满意，请采纳、关注，非常感谢！

问题描述：在下拉框选中内容后，光标在输入框最前面，且无法移动。如何让光标默认在输入框后面？ 解决方案：

1. 可以通过监听下拉框选中事件，在事件处理函数中将输入框焦点设置到末尾。
2. 也可以使用setTimeout来延迟设置输入框焦点到末尾，确保在下拉框选中事件完成后操作。 示例代码：

<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);
    // 当选中后，延迟设置输入框焦点到末尾
    setTimeout(() => {
        const input = document.querySelector('.el-input__inner');
        input.focus();
        const len = input.value.length; // 获取输入框内容长度
        input.setSelectionRange(len, len); // 将光标设置到末尾
    }, 0);
}
</script>
<style scoped lang="scss">
</style>

以上是一个使用Vue3和Element Plus实现的示例代码，其中在onSelectChange事件处理函数中使用了setTimeout来延迟设置输入框焦点到末尾，确保在下拉框选中事件完成后操作。您可以根据具体情况进行适当调整和修改。