使用 style 或 class 直接设置宽度
可以通过内联样式或 CSS 类来直接设置 el-input 的宽度为 100%，使其自适应父容器的宽度
<template>
<div style="width: 100%;">
<el-input style="width: 100%;" v-model="input"></el-input>
</div>
</template>
或者使用 CSS 类
<template>
<div class="input-container">
<el-input class="full-width-input" v-model="input"></el-input>
</div>
</template>
<style>
.input-container {
width: 100%;
}
.full-width-input {
width: 100%;
}
</style>
使用 el-form-item 的 label-width 属性
在 el-form 中使用 el-input，可以通过设置 el-form-item 的 label-width 来控制输入框的宽度。如果 label-width 设置为 auto 或 0，输入框会自动填充剩余空间.
<template>
<el-form :model="form" label-width="auto">
<el-form-item label="用户名">
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: ''
}
};
}
};
</script>
使用 flex 布局
通过 flex 布局，可以让 el-input 自动填充剩余空间。
<template>
<div style="display: flex;">
<el-input style="flex: 1;" v-model="input"></el-input>
</div>
</template>
使用 el-col 和 el-row 进行栅格布局
在 el-row 和 el-col 中使用 el-input，可以通过设置 el-col 的 span 属性来控制输入框的宽度。
<template>
<el-row>
<el-col :span="24">
<el-input v-model="input"></el-input>
</el-col>
</el-row>
</template>
或者根据需要调整 span 的值：
<template>
<el-row>
<el-col :span="12">
<el-input v-model="input"></el-input>
</el-col>
</el-row>
</template>
使用 el-input 的 size 属性
虽然 size 属性主要用于控制输入框的大小（medium、small、mini），但它不会直接影响宽度。可以结合其他方法来实现自适应。
<template>
<el-input size="small" style="width: 100%;" v-model="input"></el-input>
</template>
使用 el-input 的 resize 属性（适用于 textarea）
如果使用的是 el-input 的 type=“textarea”，可以通过 resize 属性来控制文本域的调整行为，但这与宽度自适应关系不大。
<template>
<el-input type="textarea" resize="none" v-model="textarea"></el-input>
</template>
使用 CSS calc() 函数
如果需要更精确的控制，可以使用 calc() 函数来动态计算宽度。
<template>
<div style="width: 100%;">
<el-input style="width: calc(100% - 20px);" v-model="input"></el-input>
</div>
</template>
总结
最常用的方法是直接设置 el-input 的宽度为 100%，或者通过 flex 布局来实现自适应。如果在 el-form 中使用 el-input，可以通过 label-width 来控制输入框的宽度。根据具体的布局需求，选择合适的方法来实现宽度自适应。
