根据输入内容自动调整宽度

在Element UI中，el-form-item 和 el-input 组件通常不会根据输入内容自动调整宽度。如果你想要 el-input 的宽度根据输入内容动态变化，你可以使用 CSS 的 width 属性，并结合 v-bind 或 v-model 来动态计算宽度。

以下是一个简单的例子，演示如何根据输入内容动态设置 el-input 的宽度：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="名称">
      <el-input
        v-model="form.name"
        :style="{ width: inputWidth }"
        @input="handleInput"
      ></el-input>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        name: '',
      },
      inputWidth: '100px', // 默认宽度
    };
  },
  methods: {
    handleInput() {
      // 根据输入内容设置宽度
      this.inputWidth = `${(this.form.name.length + 1) * 10}px`;
    },
  },
};
</script>

在这个例子中，每次输入内容变化时，handleInput 方法会被调用，并计算新的宽度（这里以每个字符长度乘以10个像素作为示例），然后将这个宽度赋值给 inputWidth，从而动态更新 el-input 的宽度。你可以根据实际需求调整宽度计算逻辑。