Element UI el-input 定位 el-input__inner 元素方法

在 Element UI 中，如果使用 'el-input__inner' 作为选择器来定位元素，可能会因为组件结构变化导致定位不准确。可以使用 el-input 组件的 ref 属性来解决这个问题。

以下是一个示例代码，演示了如何使用 ref 属性来获取 el-input 组件的实例对象，并使用 querySelector 方法来定位 'el-input__inner' 元素：

<template>
  <div>
    <el-input ref='myInput' v-model='inputValue'></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  mounted() {
    const inputEl = this.$refs.myInput.$el.querySelector('.el-input__inner')
    console.log(inputEl)
  }
}
</script>

在 mounted 钩子函数中，使用 this.$refs.myInput 来获取 el-input 组件的实例对象，再通过 $el 属性获取到对应的 DOM 元素，最后使用 querySelector 方法来获取 'el-input__inner' 元素。