在vue.js中设置el输入和el选择行数组元素的焦点？

在Vue.js中，如果你想要设置el-input和el-select组件为焦点，你可以使用Vue的ref属性来获取DOM元素的引用，并调用其原生方法来设置焦点。以下是如何在Vue 3中实现这一功能的步骤：

基础概念

ref: Vue中的ref属性用于注册引用信息，这些引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。
focus(): 这是一个原生DOM方法，用于设置元素获取焦点。

类型与应用场景

el-input: 文本输入框，适用于需要用户输入文本的场景。
el-select: 下拉选择框，适用于提供多个选项供用户选择的场景。

示例代码

以下是一个Vue 3的示例，展示了如何在组件挂载后设置el-input和el-select为焦点：

<template>
  <div>
    <el-input ref="inputRef" placeholder="请输入内容"></el-input>
    <el-select ref="selectRef" placeholder="请选择">
      <el-option label="选项1" value="1"></el-option>
      <el-option label="选项2" value="2"></el-option>
    </el-select>
  </div>
</template>

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

export default {
  setup() {
    const inputRef = ref(null);
    const selectRef = ref(null);

    onMounted(() => {
      if (inputRef.value) {
        inputRef.value.focus();
      }
      if (selectRef.value) {
        // el-select没有直接的focus方法，可以通过触发点击事件来聚焦
        selectRef.value.$el.querySelector('input').focus();
      }
    });

    return {
      inputRef,
      selectRef
    };
  }
};
</script>