vue需求表单有单位（时分秒千克等等）

需求如下：

问题分析：

因为用elementui组件 el-input 相当于块级元素，后面的单位<span>分</span>会被挤下去，无法在同一水平。

解决方法：

不用它的组件，自己写个原生的，用组件的class名，替换el-input__inner 为 el-input__myinner

  <el-form-item label="处理耗时">

       <div class="el-form-item__content"></div>

       <input type="text" class='el-input__myinner' v-model="form.take_time" autocomplete='off'>

      <span>分</span>

 </el-form-item>

在F12模式下，可以查看 el-input__inner   的样式，将样式复制下来，修改一下就可。

.el-input__myinner{

            -webkit-appearance: none;

            background-color: #FFF;

            background-image: none;

            border-radius: 4px;

            border: 1px solid #DCDFE6;

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

            color: #606266;

            display: inline-block;

            font-size: inherit;

            height: 40px;

            line-height: 40px;

            outline: 0;

            padding: 0 15px;

            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);

            transition: border-color .2s cubic-bezier(.645,.045,.355,1);

            margin-right:10px;

          }