使el-input获取焦点的时候宽度不变

在 Vue 中，要让 `el-input` 元素在获取焦点时保持其原始宽度不变，你可以采用以下方法：

1. 使用 CSS 样式覆盖：在你的样式表中为 `el-input:focus` 添加一个样式规则，设置 `width` 属性与默认值相同。例如：

.el-input.is-focused {
  width: initial; /* 或者不设置 width, 使其继承父元素的宽度 */
}

2. 自定义组件：如果你是用 Element UI 搭建项目，可以考虑自定义一个输入组件，在 `focus` 事件中动态重置宽度。在 `mounted()` 钩子或聚焦处理函数里，将 `input` 元素的宽度恢复到初始状态。

<template>
  <div ref="inputWrapper">
    <el-input v-model="value" :style="{width: inputWidth}" @focus="onFocus"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      inputWidth: 'initial' // 或者不写，让其自动继承
    };
  },
  methods: {
    onFocus() {
      this.inputWidth = 'auto'; // 当获取焦点时，恢复成 auto 值（即默认行为）
      setTimeout(() => {
        this.inputWidth = 'initial'; // 然后立即设回初始值，防止短暂闪现
      }, 0);
    }
  },
  mounted() {
    this.inputWidth = 'initial'; // 在组件挂载后也设置初始宽度
  }
};
</script>

这样当输入框聚焦时，宽度会瞬间变为默认值，然后立即恢复到初始宽度，避免了闪烁。