利用一个隐藏的 <span>（称为 mirror）渲染当前输入内容：
-
该
span使用与<el-input>相同的字体样式； -
每次输入时，根据
span.offsetWidth动态计算内容宽度； -
将该宽度赋给
<el-input>的style.width； -
给输入框增加少许 padding 余量，保证视觉舒适。
{{ form.name || placeholder }}<!-- 自适应宽度的 el-input --> <el-input v-model="form.name" :style="{ width: inputWidth + 'px' }" :placeholder="placeholder" class="auto-el-input" @input="updateWidth" /> </div> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">Create</el-button> <el-button @click="onCancel">Cancel</el-button> </el-form-item>限制最大宽度
inputWidth.value = Math.min(mirror.value.offsetWidth + 24, 400)此方案无需修改 Element Plus 源码，通过一个简单的隐藏
span即可实现原生级别的动态自适应宽度输入框效果