TypeError: Cannot read properties of undefined (reading 'setSelectionRange')

抱歉，我之前给出的代码有误。`el-select`组件使用了自定义的输入框组件，因此`$refs.input`属性是无效的。要实现在`element-ui`的`select`组件获取焦点时光标移到文字最后，可以使用`ref`和`nextTick`来实现。下面是修改后的示例代码：

<template>
  <div>
    <el-select
      v-model="selectedOption"
      ref="selectRef"
      @visible-change="handleVisibleChange"
    >
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
import { ref, nextTick } from 'vue';

export default {
  setup() {
    const selectedOption = ref('');
    const options = [
      { label: 'Option 1', value: 'option1' },
      { label: 'Option 2', value: 'option2' },
      { label: 'Option 3', value: 'option3' }
    ];

    const selectRef = ref(null);

    const handleVisibleChange = (visible) => {
      if (visible) {
        nextTick(() => {
          const input = selectRef.value.$refs.reference.$refs.input;
          input.setSelectionRange(input.value.length, input.value.length);
        });
      }
    };

    return {
      selectedOption,
      options,
      selectRef,
      handleVisibleChange
    };
  }
};
</script>

在上面的代码中，我们使用 Vue 3 的 Composition API，并通过 `ref` 创建了 `selectedOption`、`options` 和 `selectRef` 变量。我们定义了 `handleVisibleChange` 方法，在 `el-select` 的 `visible-change` 事件中调用该方法。

在 `handleVisibleChange` 方法中，我们使用 `nextTick` 来确保在 DOM 更新后获取到正确的输入框元素。然后，我们使用 `setSelectionRange` 方法将光标移动到文字最后。

请注意，在正确的时机调用 `handleVisibleChange` 方法，以便在获取焦点时光标能够正确地移动到文字最后。