1.最终效果

下面开始实现

2.实现

  <el-form-item label="计划名称" prop="name">
     <el-input :style="{ width: inputWid(form.name) }" v-model="form.name" placeholder="请输入计划名称"
                    maxlength="30" show-word-limit></el-input>
                </el-form-item>
//js
 computed: {
    inputWid() {
      return function (value) {
        if (!value || (value.length <= 20)) {
          return '330px'
        } else {
          // 有内容，字符串长度*字体大小
          return (String(value).length * 13 + 70) + 'px'
        }
      }
    }
  },

如果不适用的话也很正常，跟你的字体的font-size也有关系，自己根据自己的情况进行调整下哈；说实话我没想到什么好的方法来完美适配，即使相同的font-size，但是汉字，字母或则标点符号的宽度是完全不同的